Questions tagged [nativescript]

Telerik's ingenious creation, NativeScript, serves as an open source framework that revolutionizes the mobile app development process for web developers. This inventive system empowers developers to seamlessly construct native iOS and Android applications using JavaScript or TypeScript, whether in conjunction with Angular or Vue or all on their own. The impressive aspect of NativeScript lies in its ability to render exquisite native UI components, each meticulously styled by a subset of CSS. Additionally, this remarkable framework offers modules that serve as cross-platform native API abstractions, ensuring uncompromised performance. What truly sets NativeScript apart is the fact that it provides access to 100% of native APIs through the power of JavaScript. Prepare to embark on a journey into limitless possibilities within the realm of mobile development.

The canActivate: [AuthGuard] feature on the external router is not functioning as expected

I'm encountering an issue with my routing. I attempted to use the following code: const routes: Routes = [ { path: 'home', component: HomeComponent, canActivate: [AuthGuard], children: [ { path: 'events', component: EventsComponent }, { ...

angulartypescriptnativescriptrouterguard

Tips for handling the user's logged-in status in NativeScript Vue

I had a question about managing user login/logout, so I tried the following approach: store.commit('load_state'); store.subscribe((mutations, state) => { ApplicationSettings.setString('store', JSON.stringify(state)); }); new Vue( ...

vue.jsnativescriptnativescript-vue

Creating a map-like scrolling feature for a full-sized image, allowing both horizontal and vertical movement

My goal is to create an infographic image that can be scrolled horizontally and vertically, zoomed in or out, and where I can add markers just like Google Maps. I attempted the solution of using two scroll views as suggested here: https://github.com/faceb ...

reactjsvue.jsnativescriptnativescript-vue

NGRX effect in Nativescript Angular loses state when the app is suspended on iOS

While using NGRX with Nativescript Angular to manage state and fetch data from the server, I've encountered an issue when suspending the app on IOS. Whenever the app is in the middle of fetching data from the server and gets suspended, the entire process h ...

angularnativescriptngrxangular2-nativescript

NavigAuth - NativeScript Vue's Innovative Authentication-driven Navigation

After spending hours trying to figure this out, I need to ask for help. How can I create a simple Auth-based Navigation within my App? I have successfully set up a Firebase auth user inside my Vuex using an auth listener. Now, all I want is to display th ...

javascriptvue.jsnativescriptnativescript-vue

Failure to trigger the before-prepareJSApp hook in nativescript-dev-webpack

I am currently facing some challenges while trying to bundle my Nativescript app using webpack. The first issue arises when I run the following command: tns build android --bundle After running this command, it seems like webpack is not doing anything. ...

angularwebpacknativescript

Unable to find the locally stored directory in the device's file system using Nativescript file-system

While working on creating an audio file, everything seems to be running smoothly as the recording indicator shows no errors. However, once the app generates the directory, I am unable to locate it in the local storage. The code I am using is: var audioFo ...

javascripttypescriptnativescript

Ways to halt code execution if the component is not actively in use in Nativescript Vue

I'm facing an issue with my application where it continues to send data about the device every 5 seconds even when I minimize the app and reopen it or navigate away from the page. This leads to a situation where the function of sending data is triggered mu ...

vue.jsnativescriptnativescript-vue

NativeScript element isn't showing up

Being relatively new to application development with NativeScript, I find myself in a situation where I need assistance in finding a solution. Drawing from my experience with PHP, I am now looking to create a template for each "page" of the application. Th ...

javascriptangularnativescriptnativescript-angular

Exploring JSON Data with NativeScript

As a newcomer to NativeScript and JSON, I am currently facing challenges in accessing data from my JSON file. My main goal right now is to simply log some of the data for debugging purposes. Below is the code snippet from my view-model: var config = requ ...

javascriptjsonfetchnativescript

What is the best method for displaying a view on a new page in Angular 2?

Currently, I am facing a challenge with my Angular 2 project. I am struggling to figure out how to make a route open a new view instead of simply rendering in the same page. My goal is for the route to lead to a completely separate view rather than stayi ...

angulartypescriptnativescript

The concept of a singleton design pattern is like a hidden treasure waiting to be

My approach to implementing the singleton pattern in a typescript ( version 2.1.6 ) class is as follows: export class NotificationsViewModel { private _myService: NotificationService; private _myArray: []; private static _instance: Notificatio ...

typescriptdesign-patternssingletonnativescript

What are the best ways to utilize .svg images for native script splash screens, backgrounds, icons, and buttons?

I am interested in replacing the .png files I previously used for my native script android app with .svg files. My goal is to utilize svg images for splash screens, backgrounds, icons, and buttons. Thank you! ...

angularnativescriptangular-nativescript

Error: NativeScript has encountered difficulty locating the module "@nativescript/schematics"

While attempting to generate a component called "movies" with the command tns generate component movies, I encountered the following error in the terminal log: Could not find module "@nativescript/schematics". I followed the suggestions provided in this G ...

jsonangularnpmnativescriptnativescript-schematics

nativescript input value binding

<StackLayout> <Label text="Enter the station name:"></Label> <TextField hint="Station name" col="0" [ngModel]="stationName" (ngModelChange)="stationTyping($event)"></TextField> </StackLayout> An error is occurri ...

angularnativescriptangular2-nativescript

Utilize the native plugins within your Nativescript Vue application

Currently, I am facing some challenges with integrating plugins into my application. Despite successfully installing plugins using npm and seeing them added to package.json and package-lock.json files, I am unsure of how to effectively incorporate them. Fo ...

vue.jspluginsnativescript

Displaying iterative content using Vue.js from an array of items

Looking to style questions and answers differently when rendering them. The data structure is as follows: dialogTut:{ mainTab:{ q:"data with 42 people?", a:"hehe", q:"Are awesome people?", a:"sometimes", ...

javascriptvue.jsnativescript

Error encountered: The property 'localStorage' is not found on the 'Global' type

Calling all Typescript enthusiasts! I need help with this code snippet: import * as appSettings from 'application-settings'; try { // shim the 'localStorage' API with application settings module global.localStorage = { ...

typescriptnativescript

Unlocking the Power of FusionAuth in NativeScript: A Guide

While attempting to utilize a library based on nativescript documentation, I encountered an issue where certain modules like net and tls were not being automatically discovered. After using npm install to include tls and net, the problem persisted with t ...

typescriptnativescriptfusionauth

No image found, please upload a new one

Issues with Uploading Empty Images to Wordpress I am currently developing a mobile application that interacts with the Wordpress API. My app is built using the Nativescript-Vue Framework and I am facing difficulties uploading multiple images to Wordpress ...

wordpressvue.jsaxiosnativescript

I'm looking for a sample of RadPieChart for nativescript + angular. Can anyone help me out?

I'm currently working on a multi-platform application that requires a PieChart to be displayed on the main screen. Can someone point me to a comprehensive example of how to implement this? I have tried following this guide and modifying it according to my ...

angulartypescriptnativescriptnativescript-angular

Can Nativescript be integrated with Wikitude for app development?

I have a project in progress, and the client strongly believes that we should pursue the Nativescript route. While this seems like a good idea, we also need to integrate Firebase + Mapbox and Wikitude into the app. My main worry is about incorporating Wik ...

angularjsmobilenativescriptwikitude

Is it possible to adjust the color of the iOS status bar using NativeScript, Angular 2, and TypeScript?

I recently came across this npm package called NativeScript Status Bar, available at the following link: https://www.npmjs.com/package/nativescript-statusbar However, I'm facing an issue because I cannot use a Page element as I am working with Angular an ...

angularjstypescriptnativescript

Sending new props when navigating back using $navigateBack

I created an overview page where users can view their results. They have the option to edit a value by clicking on the edit button, which navigates them to another page for making changes. However, upon returning to the overview page after editing, I notic ...

vue.jsnativescriptnativescript-vue

NativeScript does not acknowledge the permission "android.Manifest.permission.READ_CONTACTS"

Hi there! I am a beginner in mobile development and currently learning Angular 2. I am facing an issue with requesting permission for reading contacts in NativeScript. It seems that "android" is not being recognized. For instance, when trying to execute t ...

androidangularandroid-permissionsnativescriptangular2-nativescript

Tips for running a Nativescript-Angular app in the background

I am currently developing a hybrid app using NativeScript and Angular that has the capability to send real-time location updates from the user to a server via the geolocation plugin, among other features. While everything seems to be working fine when the ...

angulargeolocationnativescriptupdatesbackground-process

It seems like NativeScript is facing compatibility issues on Linux systems running Node.js version 11.1.0

Setting up NativeScript on my Arch Linux machine has been a bit of a challenge. When I try to run tns doctor, I keep getting the following error message: Support for Node.js 11.1.0 is not verified. NativeScript CLI might not install or run properly. Refe ...

androidnode.jslinuxnpmnativescript

Can you explain the significance of "Result" in the .map operator of an Observable fetched from an http.get call in NativeScript with Angular?

I'm currently working on the Nativescript/Angular tutorial and I stumbled upon a particular piece of code that has left me puzzled. In chapter 4 (Nativescript modules), there is a section where they make an http.get request to fetch the Grocery List and th ...

jsonangularnativescriptreactivex

Preserve your NativeScript/Angular ImagePicker choice or retrieve the complete file path

After choosing an image with the Image Picker, I get a content// URL content://com.android.providers.media.documents/document/image%3A139 However, when using ImageSource.fromAsset(), I receive an empty object. My main objective is to save this image as a ...

angularnativescriptnativescript-angularnativescript-plugin

The error message "Unable to access property MyToast.java as it is not

I've been diligently following this tutorial on how to write Java code in NativeScript and use it directly in TypeScript. But, unfortunately, I encountered an error message stating: Cannot read property 'MyToast' of undefined app.component.ts: import {C ...

javaandroidtypescriptnativescriptnativescript-angular

Vue-NativeScript image zooming feature

Currently in the development phase, I am working on a simple application that contains a list of items. When an item is selected from the list, its corresponding image should appear in an image tag. However, there seems to be an issue with the width of t ...

vue.jsnativescript

Stop the pinch zoom functionality in Angular NativeScript WebView to prevent unwanted zooming

Currently, I am working on a Nativescript App that utilizes Angular (NG 5.1.1 / Angular 7.x). Within the app, there is a view containing a webview. @ViewChild("myWebView") webViewRef: ElementRef; <WebView class="webview" #myWebView [src]="myU ...

iosangularnativescriptwkwebviewangular2-nativescript

Implementing Dynamic Columns and Rows in GridLayout using NativeScript

My HTML code consists of two GridDatas and two buttons. When Button1 is pressed, gridData1 should be displayed, and when Button2 is pressed, gridData2 should be displayed. The number of rows and columns remains static. Here are the TypeScript snippets: g ...

angularnativescriptangular2-nativescript

Is there a way to extract a specific item from a ListView by tapping on it in Nativescript?

Attempting to retrieve data from a tap event using angular2 + typescript: This is the html code for the component: <RadListView row="1" [items]="groceryList" [class.visible]="listLoaded" (tap)="seeItem($event)" swipeActions="true" (itemSwipeProgr ...

angulartypescriptnativescript

Nativescript-vue Not Providing Real-Time Updates

Previously, I would run the command: tns run android --bundle, and any changes I made would automatically reflect in both physical and virtual Android emulators. However, now when I save my changes, nothing happens, and I have to rerun the command to see ...

vue.jsnativescriptnativescript-vue

tips on rotating an image using nativescript

I'm attempting to insert a picture from my device and then adjust its orientation in nativescript. So far, I've been using imageSource to import the picture, but I'm unsure how to rotate it. If anyone has suggestions for another class that could help wit ...

angularnativescript

Experiencing issues with installing npm packages in a NativeScript project even after attempting to utilize nativescript-nodeify

Struggling with a persistent issue that has been causing me headaches for hours. I am currently developing a mobile app in a nativescript environment and need to decode JSON Web Tokens for login purposes. However, when trying to install the npm jsonwebtoke ...

androidnode.jsnpmnativescript

Showing Firebase messages in a NativeScript ListView in an asynchronous manner

I am currently struggling to display asynchronous messages in a ListView using data fetched from Firebase through the popular NativeScript Plugin. While I have successfully initialized, logged in, and received the messages, I'm facing challenges in ge ...

angulartypescriptfirebaserxjsnativescript

Error: Android package not found when building a NativeScript app with TypeScript

I encountered the following error message: main-page.ts(15,26): error TS2304: Cannot find name 'android'. This error occurred after setting up a new NativeScript project using TypeScript. tns create demo --template typescript I then added the following ...

typescriptnativescript

Unresolved promise: Internal server issue

I encountered an exception while working on my Nativescript app. EXCEPTION: Uncaught (in promise): Server error JS: ORIGINAL STACKTRACE: JS: Error: Uncaught (in promise): Server error JS: at resolvePromise (/data/data/com.yourdomain.appname/files/app/ ...

javascriptmongodbangularnativescriptangular2-nativescript

Error message: The rootLocator function in NativeScript RadListView is not able to be

I encountered a strange error when using RadListView in the following code: <RadListView [items]="dataItems"> <ng-template tkListItemTemplate let-item="item"> <StackLayout orientation="vertical"> ...

angularteleriknativescript

Leveraging the Power of SASS Variables Across Your Entire NativeScript Application

Currently, I am in the process of developing an app using NativeScript 6.4.1 along with Angular 8. In order to enhance my styling capabilities, I have decided to incorporate SASS due to its advantageous features like variable names. My designer has suppli ...

cssangularsassnativescript

Using Vue components in NativeScript-Vue popups: A comprehensive guide

To initiate the popup, I include the following code in a root component: import parentt from "./parentt.vue"; . . . this.$showModal(parentt, { fullscreen: true, }); The contents of parentt.vue are as follows: <template> <StackLayout> ...

javascriptvue.jsvuejs2nativescriptnativescript-vue

Issues Arise with Nativescript Layout When Content is Not in View on iOS

This problem has been giving me a hard time for the past few days. I hope someone can help me figure out what's wrong. I have a view that shows a nested list inside a main list. The main list contains header details. Everything looks fine when the initial ...

iosangularscrollviewnativescript

Adding Typescript to a Nativescript-Vue project: A step-by-step guide

Struggling over the past couple of days to configure Typescript in a basic template-generated Nativescript-Vue project has been quite the challenge. Here's my journey: Initiated the project using this command: ERROR in Entry module not found: Erro ...

typescriptvue.jsnativescriptnativescript-vue

When working with Nativescript Schematics, ensure that all necessary modules are loaded properly

Currently, I am attempting to implement code sharing between an Angular web application and a mobile app using NativeScript Schematics. Below is the structure of my code https://i.stack.imgur.com/xgNrs.png In the mobile-specific HTML file, I have utilize ...

angularnativescriptangular2-nativescriptnativescript-angularangular-schematics

Error on the main thread in NativeScript Angular for Android has not been caught

As a beginner in the field of mobile development, I am currently exploring NativeScript and encountering an error in my Android application. https://i.stack.imgur.com/BxLqb.png You can view my package.json here ...

javascriptangularnativescriptangular2-nativescriptnativescript-angular

Is there stability in using *ngFor for lists in Nativescript Angular?

Update: I have inquired about the current status of RadListView in Nativescript, questioning if it still exists. You can find more information here. Initial query: Is it suitable to utilize *ngFor for lists in Nativescript? Typically, I see recommendatio ...

angularnativescript

What is the best way to configure environment files for development, local, and production API endpoints in NativeScript Vue?

I am looking to implement different flags and a specific API base url for various modes (such as dev, local, and prod) in my NativeScript Vue application. Is there a way similar to how NativeScript angular uses environment.[mode].ts files? I've attempted ...

vue.jsnativescript

information received from the socket is not displaying on the screen

I am receiving data from socket io but it is not displaying in the view. Here is the function in my TypeScript file: socketIO.on('hello', (data) => { console.log('data', data); this.mydata= data; }); The data disp ...

angularnativescript

Adding or subtracting values in Angular framework to manipulate numbers

I am looking to increment a number from 1 to 50. I attempted to use the following code, but unfortunately the function is not working properly. See Demo Here Here is the HTML: <Button text="+" (tap)="plus()"></Button> <Button text="-" (t ...

angularnativescriptincrementdecrement

Comparing PhoneGap and React.js to NativeScript for Android hybrid app development

At our organization, we experimented with creating a hybrid app development framework using Cordova/Phonegap as the foundation. Unfortunately, this approach resulted in significant performance issues. As a solution, we turned to react.js to enhance front ...

androidcordovareactjsnativescript

Tricks to access value from a Nativescript array of Switch elements when tapping a Button

Scenario: In my project, I am using Nativescript 5.0 with Angular. The data is fetched from an API and displayed in customers.component.ts I am successfully rendering the elements based on the received IDs in customers.component.html When the user inter ...

angulartypescriptnativescript

How to Retrieve Properties from Child Elements in NativeScript ngFor Directive

Working with a dynamically generated checklist in Angular/Nativescript: <StackLayout *ngIf="assessment"> <StackLayout *ngFor="let instance_item of assessment.exam_instance_items; let i= index"> <ns-examitem [attr.id] ...

angularnativescriptnativescript-angular

What is the proper location for installing axios in a Nativescript-Vue application?

I'm facing a dilemma with two package.json files in my project. One is located at the root and the other is in the app directory where the Vue files are stored. I'm unsure of which one to use for installing axios. Additionally, I'd like clarification on ...

vue.jsnpmaxiosnativescriptnativescript-vue

Unable to execute OAuth2 with Okta using angular-oauth2-oidc framework

Looking to create an authentication module for an Angular application using Okta as the identity provider and implementing the angular-oauth2-oidc flow. Following a guide here: . However, encountering errors when running the web app. How can I troubleshoot ...

angulartypescriptoauth-2.0nativescriptangular-oauth2-oidc

Is there a way to adjust the StatusBar color or make it transparent on Android when working with NativeScript and Angular?

I am having trouble changing the StatusBar color in my NativeScript with Angular project. It currently appears as translucent black, darkening the background behind it. I want to either make it transparent or match the background color of the page. What I ...

androidangularnativescriptstatusbartransparent

Unlock exclusive design features from beyond a Component's borders (NativeScript + Vue)

My application is made up of: 6 different components within the component folder, 3 JavaScript files located in the library folder. Within component_1, there is a Layout with a reference called myLayout. One of the JS files, myLayoutHandler, manipulates ...

vue.jsnativescript

"Unlock the power of remote-redux-devtools in NgRx: A step-by-step guide

Currently, I am utilizing NgRx in an Angular NativeScript project for Android and iOS apps, and it is proving to be quite effective. However, one aspect that concerns me is the inability to use @ngrx/store-devtools and the Redux DevTools Chrome extension d ...

angularreduxnativescriptngrxremote-debugging

Error message: Unidentified variable encountered during API fetch using Axios props

Introduction to My Main Component This component, named "Home", is a straightforward one that simply passes the fetch variable to another component. <template> <Page actionBarHidden="true"> <ComponentA :api="api.somevariable" ...

vue.jsnativescriptnativescript-vue

Angular demo showcasing a Multi-Column ListView component in NativeScript

I have a question that may seem simple to you, but I haven't been able to find a straightforward example anywhere. I came across this resource already, but it's not in Angular. As a beginner in Nativescript (I've been working with it for a ...

angularlistviewnativescriptangular2-nativescriptnativescript-angular

Vue Nativescript failing to display an image

Why are my images not showing up? The label is displaying the URL properly but the image is not showing. Why is it not displaying? Do I need to add something? It was working before. When I added a normal image with the source plain text like this, it show ...

vue.jsnativescript

Struggles with updating app.component.ts in both @angular/router and nativescript-angular/router versions

I have been attempting to update my NativeScript application, and I am facing challenges with the new routing system introduced in the latest Angular upgrade. In my package.json file, my dependency was: "@angular/router": "3.0.0-beta.2" After the upg ...

angulartypescriptnativescriptangular-routing

The ListView is not updating correctly as expected

Currently, I am working on a project where I have a Page with a ListView that displays items from an ObservableArray of Expense objects. The issue I am facing is that when I scroll down, the amount property of some Expense rows is not being displayed. Howe ...

typescriptnativescript

Icon positioned to the left within the text box

Hey there! I'm new to NativeScript and I've been struggling to place an icon inside a textbox. Can someone please help me out? Expected Output: https://i.stack.imgur.com/xvoZG.png Code <GridLayout columns="*, *" rows=& ...

angularxmlnativescript

Troubleshooting NativeScript 5: Uncovering the iOS Memory Woes of Crashes and Le

Check out this link for more information: https://github.com/NativeScript/NativeScript/issues/6607 Software Stack: NativeScript 5 Angular 7 Demo repository: https://github.com/reposooo/ns-out-of-memory This issue is based on a similar problem i ...

angularnativescriptangular2-nativescriptangular7nativescript-angular