Create a transparent NativeScript list item for iOS

Question

I am trying to make NativeScript <ListView> transparent in iOS and Im failing. I found an old topic on the topic https://groups.google.com/forum/#!topic/nativescript/-MIWcQo-l6k , but when I try the solution, it does not work for me. Here is my complete code:

 /* app.css */ Page { background-color: black; } 

---

 <!-- main-page.xml --> <Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded"> <ListView id="list-view" items="{{ items }}" itemLoading="itemLoading"> <ListView.itemTemplate> <Label text="{{ name }}" /> </ListView.itemTemplate> </ListView> </Page> 

---

 // main-page.js var ios = require("utils/utils"); var Observable = require("data/observable").Observable; var ObservableArray = require("data/observable-array").ObservableArray; var page; var items = new ObservableArray([]); var pageData = new Observable(); exports.loaded = function(args) { page = args.object; page.bindingContext = pageData; // Toss a few numbers in the list for testing items.push({ name: "1" }); items.push({ name: "2" }); items.push({ name: "3" }); pageData.set("items", items); }; exports.itemLoading = function(args) { var cell = args.ios; if (cell) { // Use ios.getter for iOS 9/10 API compatibility cell.backgroundColor = ios.getter(UIColor.clearColor); } } 

Any help would be greatly appreciated. Thanks!

Answer 1

Remember to set the transparency of the list, it seems to have a background color

  ListView{ background-color: transparent; } 

Answer 2

Currently with NativeScript 2.4, the following works

 var cell = args.ios; if (cell) { cell.selectionStyle = UITableViewCellSelectionStyleNone } 

And if you want to change the highlight color, here is a simple approach, I have not tested the performance, but it works fine on the iPhone 6.

 import { Color } from 'color'; cell.selectedBackgroundView = UIView.alloc().initWithFrame(CGRectMake(0, 0, 0, 0)); let blue = new Color('#3489db'); cell.selectedBackgroundView.backgroundColor = blue.ios 

Answer 3

Not sure if there are better ways to do this, but this is what worked for me with NativeScript 2.4 in iOS for A) making the ListView transparent background and B) changing the color while listening to the element:

 let lvItemLoading = (args) => { let cell = args.ios; if (cell) { // Make the iOS listview background transparent cell.backgroundColor = ios.getter(cell, UIColor.clearColor); // Create new background view for selected state let bgSelectedView = UIView.alloc().init(); bgSelectedView.backgroundColor = new Color("#777777").ios; bgSelectedView.layer.masksToBounds = true; cell.selectedBackgroundView = bgSelectedView; } };