Trouble Using New Images Added to App Resources


#1

Here’s the scenario:

  • You’ve got images in your app > App_Resources > iOS (or Android) folder
  • They show-up fine using the “resource” syntax: <image src="res://myimage" />
  • You add a NEW image to the resources directory
  • When you try to use it in your app, IT’S NOT THERE!

What happened? Is the image the wrong size? Wrong format? In the wrong place?

Assuming you’ve done all the basics correctly (PNG or JPG, any size, in the appropriate App_Resources folder), the MOST LIKELY problem is that the image has simply not been deployed to your device or simulator.

This is the “gotcha.”

Running any of these normal NativeScript commands WILL NOT update your app package with your new image:

  • tns emulate
  • tns debug
  • tns livesync

Because this is a new app resource, the app needs to be fully recompiled and redeployed before your new image will work. That means you need to do one of the following:

  1. tns deploy
  2. tns run
  3. tns build (+ any other command to run/debug app)
  4. Delete the app on the device/simulator manually, and then rebuild/deploy

This only applies to images used as App_Resources. If you reference images from the file system (such as <image src="~/myimage.png" />), all app updates will catch your new image. The advantage of App_Resource images, of course, is that you can deploy multiple-resolution variations (@2x, @3x) and iOS/Android will auto-use the best version.

So there you go. Next time you’re banging your head against the wall wondering why your image won’t display, stop, run one of the tns commands above, and enjoy.

UPDATE: As Mark mentioned below, this same guidance applies to new plugins or npm packages added to your app. Before you will see the plugin/package show-up, you need to run one of the actions that does a full rebuild and deploy of your app.


#2

This thing is same for node_modules packages so maybe change text/example for this thing too :wink: Or not sure how its with editing existing posts :smiley:


#3

Got me a time or two early on also https://bradmartin.net/2016/07/20/ahhh-this-nativescript-plugin-doesnt-work/


#4

Hey @toddanglin, do you have similar steps for getting images deployed when using AppBuilder?


#5

@StevenLJackson I do not, unfortunately.

@roblauer Do you have guidance for deploying App_Resource images when using AppBuilder?


#6

@StevenLJackson The process should be similar for AppBuilder. The livesync process will not catch any of these changes, but a full rebuild/deploy will. If you’re seeing any other behavior, please let me know!


#7

Thanks for the information… Here is what I am experiencing:

  1. I added an image to the various App_Resources/Android sub-folders (only focusing on Android development for the moment)
  2. I did a Run | Build and chose “App package” from the dialog (again, only Android)
  3. When the build completed, I scanned the QR code to get the latest package; Now here is where it gets interesting…
  4. If I load the apk file and launch it from the OS (i.e., not through the platform app), I see the new image
  5. If I use the Telerik Platform App on my phone, go to My Apps, and launch it from there, I do not see the new image. In fact, it says that the Last Updated date is 5 days ago.

So I thought that I needed to build a “NativeScript Developer App” so that I could load it in the Telerik Platform App. After I did that there was no difference when launching my app from the Telerik Platform App. Next I scanned the QR code from the Telerik Platform App; the app launched and there was still no image to be seen.

I have made other changes to the app (like changing the text of a few labels), and I do see those changes; I just don’t see the image that I uploaded. I also changed the icon, which shows up correctly in my app list on the phone (when I install the APK file) but the Telerik Platform App still shows the stock {N} icon.

[UPDATE]: I tried uninstalling both the Telerik Platform Application and the NativeScript application and reinstalling them to see if that would help. No matter what I do, I do not see the image I added nor the icon I updated. The Telerik Platform Application still says that my app was last updated 5 days ago. Strange thing is that I can see other changes, still, like button text and label text changes, as well as new console.log() messages.

Is anyone else seeing issues like these? Am I missing a step somewhere? Any guidance would be greatly appreciated, since I’ve only been at this for a week or two in earnest.

Thank you,

Steve


#8

Hello Steve,

I am the PM of AppBuilder. Thanks for bringing this issue to our attention.

Files in App_Resources directory are handled in a different way than other files in the project. I do not know the exact technical detail as I don’t have much experience with Android programming.

My understanding is that they are compiled in a dex file and only full recompilation and re-deployment on a device can change them. This is a limitation of the OS itself and even Android Studio and NativeScript tooling do this recompilation/redeployment cycle.

On the other hand, as currently implemented, AppBuilder’s LiveSync feature updates only project file which are the files outside this special directory. Initially, it supported only js, css, and xml but extended the feature to include other file types as well.

This explains why you cannot LiveSync files from App_Resources - they fail outside of the scope of the current implementation of this feature, as it simply delivers the updated files to the device and instructs the running app to start consuming them. It does not recompile the app.

The same limitation applies to the NativeScript Developer App - as it is a regular Android app, its resources cannot be touched by the LiveSync feature.

That said, this looks like a very viable feature and the team started preliminary discussions about implementing it.

You can definitely speed up the process by opening a support ticket here: https://www.telerik.com/account/support-tickets/contact-support-team


#9

Thank you @TodorTotev!

Based on my findings (please see my steps 4 and 5 above), I think I will open a ticket since the app behaves differently if I install and run the APK file directly on my phone versus running the app through the Telerik Platform app.

Steve

[UPDATE: Ticket number is 1086733. -sj]


#10

I don’t use AppBuilder but uninstalling an .apk from an Android device is common when you make changes that are compiled such as app_resources. I wonder if that’s the issue with what you’re experiencing.


#11

Thanks @bradwaynemartin, but I have no issue with the APK version. It behaves (mostly) as I expect; namely I can see the images that I uploaded.

Instead, it is when I rebuild and redeploy the app for use in the Companion app, where I can see the log files and such. The new images I added to the project do not show up, even though some of my other code changes (e.g., log file messages) do show up when I rebuild and redeploy.

Is it just me?