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!

score 12 · Accepted Answer · answered Mar 31 '16 at 14:08

12

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

    ListView{
        background-color: transparent;
    }

answered Mar 31 '16 at 14:08

Steve McNiven-Scott

1,770
2
15
29

1

To clarify for future Googlers, use this + TJ's `itemLoading` code to make the iOS ListView background disappear. You need both. – Todd Jan 26 '17 at 05:48

Brad Martin · Answer 2 · 2016-11-22T19:54:26.037

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

edited Nov 22 '16 at 19:54

answered Nov 22 '16 at 19:00

Brad Martin

5,637
4
28
44

How can I get access to UITableViewCellSelectionStyleNone? It's coming from UITableViewCellSelectionStyle, but I can't find a fitting import with Webstorm. Thanks for your answer. Kind regards, David. – David Artmann May 01 '17 at 09:56

score 1 · Answer 3 · answered Jan 26 '17 at 18:38

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

Make a NativeScript ListView Transparent on iOS

3 Answers3

Linked