Using Responsive Images in a Native App

[Andy]

I would like to use responsive images in a Native app (not Hybrid), but all the samples and examples I can find are only in Hybrid apps.

When I try using the code from the Hybrid app example in a Native app I get an error.

My app has a single view called main-page, and in the main-page.js file I have added the following:

var vmModule = require("./main-view-model");
var Everlive = require('./everlive.all.min');
function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = vmModule.mainViewModel;
    
    var el = new Everlive('my-api-key-is-here');
    el.helpers.processAll();
}
exports.pageLoaded = pageLoaded;

 

In my main-view.xml I have a single image with data-src and data-responsive:

<Image data-src="https://my-image-url-is-here" data-responsive />​

The error I get is 'Cannot read property 'processAll' of undefined'

I'm guessing this is because I'm creating a Native app, and the helper is for html/Hybrid apps.

Does anyone know whether you can use Responsive Images in the same way in Native Apps.

Thanks

[Anton Dobrev]

Hello Andy,

Indeed, the HTML Helpers for Responsive Images would work only with DOM elements. I'd suggest that you use the platform-independent approach via the server API and dynamically set as a source of the image the URL of the resized image as explained here.

For instance, a similar approach is used for the native iOS example.

Let me know if you have questions.

Regards,
Anton Dobrev
Telerik