The inability to utilize custom images as icons with the "icon" property is a limitation for Android and IOS development in NativeScript

Having some trouble with the "icon" property in the Navigation button tag to use a custom image as an icon.

On Android, it's working fine, but on iOS the image appears oversize. I've tried using scss and setting height in the tags themselves with no success.

Not even able to hide the image by setting the visibility property to false using platform-specific css on iOS to view the default icon.

Any ideas on how to:

  • Hide the image on iOS and display the default one
  • Resize the Image - check out this image of HTML code
androidiostypescriptnativescript

Answer №1

Providing a code base to show your attempts is good practice on StackOverflow.

If you are using res:// as demonstrated below:

<NavigationButton icon="res://ic_menu" />

The solution involves supplying different scaled images in your resources folder located within app/App_Resources/iOS (or Android). Learn how to handle varying image sizes for different screens from your App_Resources here for iOS and here for Android.

If you prefer to use one image and manipulate it with CSS and image properties (width, height, etc.), you can create your own folder such as images and refer to it like so:

<Image src="~/images/logo.png" stretch ="none" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for generating a fixed-length array from multiple arrays with different lengths, focusing on selecting items from each array according to their significance

In order to create a quiz, I am looking to extract 'questions' from various 'topic' arrays. These topics are selected based on the user's preference and are used to populate a question bank for a 20-question quiz. The topics rated ...

javascriptarraystypescriptsortingweighting

What steps are involved in compiling a library without using Ivy?

After compiling my library, I navigated to dist/my-library and encountered the following error message: ERROR: Attempting to publish a package compiled with Ivy, which is not permissible. Prior to publishing, delete and re-build the package without us ...

javascriptnode.jsangulartypescriptnpm

What is the best way to incorporate Dynamic Row Span in a StaggeredGridLayoutManager?

I am struggling to figure out how to implement a custom Rowspan in a StaggeredGrid layout. https://i.sstatic.net/BfTvi.jpg Is there a way to dynamically change the rowspan of a StaggeredGridLayout? I came across an implementation suggested by @Gabriele M ...

androidandroid-recyclerviewmaterial-designstaggeredgridlayout

Pattern Match for /{AnyWord}/

Can you provide me with a regular expression for &Anyword= I am looking to locate this particular expression and substitute it with a different template, while ensuring that "Anyword" remains between "&" and "=". ...

iosregexnsregularexpression

"Encountering a plethora of server errors when running

After deleting the nodes_module folder and package-lock.json file, I have repeatedly tried to start my npm server in the same location. Additionally, I attempted to run ng update @angular/cli. Any assistance would be greatly appreciated. The errors I am ...

node.jsangulartypescriptnpm

How to prevent redundant object declarations when passing parameters in TypeScript?

Motivation for Using Object Parameters One of the motivations behind using objects as function parameters is to allow the caller to clearly define arguments with specified field names, which can make code reviews easier. Challenge When Using Implements an ...

typescript

Utilizing Node.js in Phonegap

Currently, I am in the process of creating an iOS application with PhoneGap and I have an interest in incorporating node.js into a specific aspect of it. Is it possible to integrate an instance of node.js within the app using PhoneGap? ...

javascriptiosnode.jscordova

NG0303: Unable to establish a connection with 'ngbTooltip' as it is not recognized as a valid property of 'button'

ERROR: 'NG0303: Can't bind to 'ngbTooltip' since it isn't a known property of 'button'.' Encountering this issue in my Angular 12 project when running local tests, the ngbTooltip error is present in all .spec files. ...

javascriptangulartypescriptunit-testingkarma-jasmine

Improving the App() function in React and Typescipt

When working on my React/Typescript app, I encountered a challenge with the length of the code in one of the sections. Despite watching tutorials and searching for solutions, I couldn't find a clear way to refactor it. The specific issue is with refa ...

javascriptreactjstypescript

JSONPath encounters an issue when square brackets are embedded within a string

I am encountering issues with the JSONPath library found at https://github.com/JSONPath-Plus/JSONPath in its latest version. For example: { "firstName": "John", "lastName": "doe", "age": 26, ...

jsontypescriptjsonpathjson-path-expressionjsonpath-plus

Tips for effectively typing a collection of React wrappers in TypeScript

I encountered a situation in my team's application where we need the ability to dynamically compose component wrappers (HOCs) without prior knowledge of all the wrapper interfaces. This is mostly needed for swapping out context providers when renderin ...

reactjstypescripttuplestype-inferencereact-typescript

typescript with React's Context API

Have you seen my demo? This is a basic React application built with Typescript. I'm experimenting with React's Context API. One of the key components I've set up is the ThemeContext, which contains simple theme styling values for use in o ...

reactjstypescriptreact-context

Integration of Facebook into an iOS application: Backup plan for iOS 5.0

My iOS app has native Facebook integration that works well, but it's only compatible with iOS 6.0 and above. I need to make sure the app doesn't crash on older versions of iOS like 5.0. Currently, when I build the app for iOS 5.0, I'm encoun ...

iosobjective-cfacebookios6

Using Jackson to serialize and deserialize a HashMap<MyObject, List<Integer> involves converting the data structure into a JSON format for storage and

In the process of developing a compact android application, I am tasked with creating a mechanism for saving and restoring a variety of settings through serialization and deserialization utilizing the Jackson library. So far, most functionalities are worki ...

javaandroidjsonjackson

Error message "After the upgrade to Angular 15, the property 'selectedIndex' is not recognized in the type 'AppComponent'."

My Ionic 6 app with capacitor has been updated in the package.json file. These are the changes: "dependencies": { "@angular/common": "^15.1.0", "@angular/core": "^15.1.0", "@angular/forms": "^15.1.0", "@angular/platform-browser": "^15.1. ...

javascriptandroidangulartypescriptionic-framework

If you encounter the error message "The term 'Office' is not defined no-undef" it may be due to using a version of react-script that is newer than 3.0.0

I encountered an issue while creating an Outlook add-in using React and Typescript. When I tried to run my code with npm run start, I received the following error message, preventing me from running my React app. Failed to compile. ./src/index.tsx Line ...

reactjstypescriptoffice-jsoutlook-web-addins

Implement a personalized confirmation prompt prior to removing my Android application

As a newcomer to Android, I'm looking to incorporate a personalized Confirmation dialog before uninstalling my Application on Android. Any guidance on how to accomplish this would be greatly appreciated. Thank you in advance. ...

androiduninstallation

Ways to assign a value to an optional property in a different ViewController

I am attempting to transfer a date value from one view controller to a date picker modal using the prepare(forSegue: ...) method, which includes optional minimumDate and maximumDate properties. However, the modal is not receiving the value from the first v ...

iosswift

How can I showcase my Twitter followers on an iOS 5 app?

I'm currently working on a demo application inspired by Twitter. I've successfully implemented a Twitter login feature, but I'm looking to also show the list of users I follow. Is there a method to retrieve and display the list of people I f ...

iphoneiosios5twitter

What is the best way to reset a dropdown list value in angular?

Is there a way to erase the selected value from an Angular dropdown list using either an x button or a clear button? Thank you. Code <div fxFlex fxLayout="row" formGroupName="people"> <mat-form-field appearance=&quo ...

javascriptangularjsangulartypescript