Make a NativeScript ListView Transparent on iOS

Question

I’m trying to get a NativeScript <ListView> to be transparent on iOS and I’m failing. I found an old thread on the topic at https://groups.google.com/forum/#!topic/nativescript/-MIWcQo-l6k, but when I try the solution it doesn’t work for me. Here’s 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 appreciated. Thanks!

Answer 1

Don't forget to set the listview to transparent, seems to have a backgroundcolor itself

    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 selection highlight color here is a simple approach, I have not tested performance but it works okay on an 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 on iOS to both A) make the ListView background transparent, and B) change the color when an item is tapped:

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;
   }
};