Fresco image cache plugin

[Tim]

Hi Folks,

I saw a post from one of the Telerik guys that indicated the Fresco plugin was available in the (Platform?) marketplace. However it doesn't look like it is there. I am using the Platform in-browser client, so that the Platform npm registry is the only place I can pickup other packages I think.

I am am wanting to use something to help me with image caching and resizing, as nativescript is crashing out on Android. I use several photos in my app. Seems to work fine on iOS (iPad), but Android lasts a few minutes then crashes.

https://github.com/NativeScript/nativescript-marketplace-demo/tree/production/deps

 

Thanks,

Tim

[Tsvetan]

Hello Tim,

In the AppBuilder in-browser client you can add plugins which are not in our Plugins Marketplace but they are in the npm registry. The nativescript-marketplace plugin is in the npm registryand you can add it as described in this article.

In nativescript-marketplace-demo the "Item layouts" page has more than 40 images and nativescript-fresco is used to display them on android and the application does not crash. You can see how the plugin is used in listview-layouts.xml. This demo uses nativescript-fresco version 0.1.0 from local .tgz file. We changed it to the latest version - 1.0.4 from npm instead of the local file and the application is still stable.

Hope this helps.
Regards,
Tsvetan
Telerik by Progress

[Tim]

Many thanks for that info. I managed to find the nativescript-fresco plugin when I went back in for another look . I think the search text box works in a peculiar way. I think that needs a little attention.  I then made the mistake of just selecting it and including it in my project thinking that would work with my companion app & livesync. For some reason I picked up lodash a month or so back that way, and it did work. I think that module must be bundled in with the companion app already.

 

So I can see from your example how to use it. The listviewlayouts.xml  is insightful. I can see that you can load images in ios and android differently (Android using fresco). That is cool. My app works really well on iOS. I have to hand it to those guys they manage memory better than Android, in that I don't have to deal with it.

 

The drawback I've discovered to using fresco is that the developer app (companion app?) can no longer be used once you include these packages. To develop in platform and use those packages I would need to do a build and deploy, which is a long turnaround and not a favourable way for me to debug. The advantage of coding in Platform is that I don't have to install and maintain tools, and that I can code and test on real devices (via livesync) in the companion app rapidly. If I go down that route that becomes one less reason to stay on platform. For the meantime I am implementing bespoke image resizing using android bitmapFactory and using image-cache to manage the data. Though it still looks like I am having to invoke gc() to keep my app going on Android. I'm explicitly dereferencing the image.src (= null) when I leave a page. But if I don't invoke the gc() nativescript stops.

 

Is image-cache only for loading pictures off the internet? It seems you have to specify a url. Can that point to the local file system? All the documentation and examples I have seen all refer to "https://..."

 

 

 

 

[Tsvetan]

Hi Tim,

With the nativescript-fresco plugin you can load images both from internet and from local file system and the Fresco library will take care of the image caching and the memory management. We will consider adding this plugin to the NativeScript Developer App in one of our next releases.

For now you can add it to your project from npm, build App package and scan the QR code to deploy it on your device. You do not need to build and deploy the application when you make changes to your code, you can use LiveSync - check here for more information.

I hope this helps.

Regards,
Tsvetan
Telerik by Progress

[Tim]

Much obliged. If I understand that correctly, I can add the Fresco package and do an app build & deploy, and then then I can continue test via the companion app with using livesync for further changes after that.

[TechticSolutions]

Hi,

Thanks for plugin. i getting error. i need help.

Thanks.

 

[Tsvetan]

@Tim, when you build an App package a QR Code will be displayed and you need to scan it. After that if you follow the link from the QR Code the application file will be downloaded to your device and you will need to install it. After you do that you can start using your application and LiveSync the changes like it is described here.
For now this is the only way to use this plugin in your application but we have decided to include the nativescript-fresco plugin in the NativeScript Developer App and you will be able to continue with your current workflow after we publish the new version of the NativeScript Developer App in our next release.


@TechticSolutions, can you please provide more information about the error? Also it would be very helpful if you send us the steps to reproduce it.

Regards,
Tsvetan
Telerik by Progress