nstudio/nativescript-cardview

:diamonds: :clubs: NativeScript widget for Material Design CardView

Source management moved to nstudio/nativescript-plugins

---

NativeScript CardView

A NativeScript plugin to provide an XML widget to implement the Material Design CardView component.

---

Installation

NativeScript 7+:

ns plugin add @nstudio/nativescript-cardview

NativeScript prior to 7:

tns plugin add @nstudio/[email protected]

---

Material Design Card Spec

CardView Android Documentation

Usage

iOS note: Setting a background-color will help if you do not see the card on the page.

NativeScript Plain

IMPORTANT: Make sure you include xmlns:Card="@nstudio/nativescript-cardview" on the Page element

XML

<Page xmlns:Card="@nstudio/nativescript-cardview">
   <StackLayout>
      <Card:CardView class="cardStyle" margin="10" elevation="40" radius="5">
           <grid-layout rows="200, auto, auto" columns="auto, auto, *">
               <image src="~/images/batman.jpg" stretch="aspectFill" colSpan="3" row="0" />
               <label text="Batman wants to be friends?" class="info" textWrap="true" row="1" colSpan="3" />
               <button text="DECLINE" tap="goAway" row="2" col="0" />
               <button text="ACCEPT" row="2" col="1" />
           </grid-layout>
       </Card:CardView>
   </StackLayout>
</Page>

CSS

.cardStyle {
  background-color: #3489db;
  color: #fff;
}

---

NativeScript Angular

import { registerElement } from '@nativescript/angular';
import { CardView } from '@nstudio/nativescript-cardview';
registerElement('CardView', () => CardView);

<CardView class="cardStyle" margin="10" elevation="40" radius="1">
  <GridLayout rows="10,30,30,250, auto, auto,10" columns="10,40, *, 30,10">
    <image
      src="res://profile"
      stretch="aspectFit"
      verticalAlignment="stretch"
      col="1"
      row="1"
      rowSpan="2"
    ></image>
    <label
      class="createdBy text-left"
      horizontalAlignment="left"
      [text]="item.CreatedBy"
      row="1"
      col="2"
      textWrap="true"
    ></label>
    <label
      class="createdOn text-left"
      horizontalAlignment="left"
      [text]="item.UpdatedDate"
      row="2"
      col="2"
    ></label>
    <image
      [src]="'https://img.youtube.com/vi/'+item.MediaURL+'/mqdefault.jpg'"
      stretch="aspectFit"
      colSpan="3"
      col="1"
      row="3"
    ></image>
    <label
      horizontalAlignment="left"
      [text]="item.Title"
      colSpan="3"
      row="4"
      textWrap="true"
      col="1"
    ></label>
    <label
      horizontalAlignment="left"
      [text]="item.Summary"
      textWrap="true"
      col="1"
      row="5"
      colSpan="3"
    ></label>
  </GridLayout>
</CardView>

---

NativeScript Vue

import Vue from 'nativescript-vue';
Vue.registerElement(
  'CardView',
  () => require('@nstudio/nativescript-cardview').CardView
);

<card-view margin="10" elevation="40" radius="1">
  <stack-layout>
    <label text="Hello World"></label>
  </stack-layout>
</card-view>

---

Attributes

• radius optional

An attribute to control the 'border-radius' of the card.

Platform specific options

Android

• elevation optional

An attribute to set the elevation of the card. This will increase the 'drop-shadow' of the card. There can be some performance impact when using a very high elevation value.

• ripple optional

Set to 'true' to show a ripple when the card is tapped. Tap event handlers in the card content will prevent the ripple.

iOS

• shadowOffsetWidth optional

An attribute to offset the x position of the shadow behind the card.

• shadowOffsetHeight optional

An attribute to offset the y position of the shadow behind the card.

• shadowColor optional

An attribute to set the color of the shadow behind the card.

• shadowOpacity optional

An attribute to set the opacity of the shadow behind the card.

• shadowRadius optional

An attribute to set the radius of the shadow (shadow spread) behind the card.

The default values are set to:

radius = 2;
shadowOffsetWidth = 0;
shadowOffsetHeight = 2;
shadowColor = new Color('#000').ios
shadowOpacity = 0.4;
shadowRadius = 1;

Sample Screenshots

Android

Sample 1	Sample 2

iOS

Sample 1	Sample 2

Run Demo

git clone https://github.com/nstudio/nativescript-cardview.git

npm run demo.ios

// or...

npm run demo.android

Changelog

Contributing

nativescript-cardview's Issues

Error on IOS build --ng (pod issue)

I created new tns ng project

I installed the plugin

On tns build ios getting following error

Installing pods...
Analyzing dependencies
[!] Unable to satisfy the following requirements:

- `MaterialCard (~> 1.1.4)` required by `Podfile`

None of your spec sources contain a spec satisfying the dependency: `MaterialCard (~> 1.1.4)`.

You have either:
 * out-of-date source repos which you can update with `pod repo update`.
 * mistyped the name or version.
 * not added the source repo that hosts the Podspec to your Podfile.

Note: as of CocoaPods 1.0, `pod repo update` does not happen on `pod install` by default.
Processing node_modules failed. Error: Command sandbox-pod failed with exit code 1

I am using Xcode 8
tns info

┌──────────────────┬───────────────────────┬────────────────┬───────────────┐
│ Component │ Current version │ Latest version │ Information │
│ nativescript │ 2.4.0-2016-09-21-6710 │ 2.3.0 │ Up to date │
│ tns-core-modules │ 2.3.0 │ 2.3.0 │ Up to date │
│ tns-android │ │ 2.3.0 │ Not installed │
│ tns-ios │ 2.4.0-2016-9-28-1 │ 2.3.0 │ Up to date │
└──────────────────┴───────────────────────┴────────────────┴──────────────

[iOS] Can't find variable: MaterialCard

I just installed 1.2.0 of the plugin (using it for the first time). And I get this error when running the app:

myapp.app/app/tns_modules/nativescript-cardview' not found for element 'nativescript-cardview:CardView'.
       ↳Can't find variable: MaterialCard

Tried also running via Xcode, but get the same error. Looks similar to: #12

Using {N} 2.3.0, xcode 8 on macOS Sierra 10.12, pod version 1.0.1

Cardview using in ListView or Repeater has no drop shadow on Android.

Hi,

I presume this is a limitation in the nativescript controls but when I have a card view inside a list view or a repeater the cards have no drop shadow.

I had to wrap the card in a StackLayout with padding otherwise the cards were right on top of each other on iOS but I have tried without this and still have the same behaviour.

Thanks, Simon

Setting radius doesn't have any effect

Adding a radius property does not change the radius of the cards.

Am I doing something wrong?

iOS Build Error on Telerik AppBuilder

Hi @bradmartin

Same issue as nstudio/nativescript-floatingactionbutton#24

Getting the following error on the Telerik AppBuilder when trying to build a project.

Error: Cannot build project because module nativescript-cardview contains insecure code. Remove the module and try again.

NPM has old version

I see package.json has version 1.3.0
But on NPM latest release is 1.2.1

tns plugin add nativescript-cardview installs v 1.2.1

nativescript-cardview not found

Hi, i installed (npm install nativescript-cardview) cardview and included the xmlns in page (xmlns:Card="nativescript-cardview"), but my app crashes on the page containing it saying 'nativescript-cardview' not found.

I also tried to install cardview as a plugin (and installation was done, by the way). But same error.

tns 2.4.2, vanilla nativescript (not angular2)

Any ideas ?
Thanks in advance

working on iOS support

Nice plugin, my work is looking forward to having both platforms with this, thank you.
I've been trying to work with Pods and using this as a guide:
http://docs.nativescript.org/plugins/cocoapods

I'm having an issue getting it to work. If you get a chance to check it out here maybe we can work together on it:
https://github.com/NathanWalker/nativescript-cardview/tree/ios-support

Just a couple pointers on how to get the pod integration working and I could get past this road block.

cardview.d.ts is not a module

Hi,
I'm new to NS so I'm sure this issue is my own doing...
I'm trying to launch the demo after cloning the repo but I'm getting the following issue:

Any pointers?..
Nice looking module by the way!

node_modules/nativescript-cardview/index.d.ts(1,15): error TS2306: File '.../nativescript-cardview/demo/node_modules/nativescript-cardview/cardview.d.ts' is not a module.

> tns --version
2.1.1

> git clone https://github.com/bradmartin/nativescript-cardview.git

> cd /.../nativescript-cardview/demo

> tns platform add ios
Copying template files...
Project successfully created.

> tns run --emulator ios
npm WARN package.json @ No description
npm WARN package.json @ No repository field.
npm WARN package.json @ No README data
npm WARN package.json @ No license field.

> [email protected] postinstall /.../nativescript-cardview/demo/node_modules/nativescript-dev-typescript
> node postinstall.js

Project already targets TypeScript ^1.8.10
[email protected] node_modules/nativescript-cardview

[email protected] node_modules/lazy

[email protected] node_modules/filewalker
└── [email protected]

[email protected] node_modules/typescript

[email protected] node_modules/nativescript-dev-typescript
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/tns-core-modules
└── [email protected]

[email protected] node_modules/babylon
└── [email protected] ([email protected])

[email protected] node_modules/babel-traverse
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected]
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/babel-types
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected] ([email protected], [email protected])
Executing before-prepare hook from /.../nativescript-cardview/demo/hooks/before-prepare/nativescript-dev-typescript.js
Found peer TypeScript 1.8.10
node_modules/nativescript-cardview/index.d.ts(1,15): error TS2306: File '/.../nativescript-cardview/demo/node_modules/nativescript-cardview/cardview.d.ts' is not a module.

TypeScript compiler failed with exit code 1

iOS Not Displaying Border and Instead Applies Shadow to Every Element

npm v3.10.10
node v6.11.3
{N} v3.2.1
nativescript-angular v4.2.0
nativescript-cardview v2.0.2

When I load the app up on iOS, the contents inside the <CardView> have shadow applied (ie. all labels, css borders, etc.) and no border appears around the container (and hence no shadow around it).

Here is a screen comparison:


I commented the CardView out in this second image.

The same view on Android works as expected.

upload images and videos to Facebookcard

hello everyone
am building a nativescript ng app and i want to know how can i show posts on Facebookcard from the server

cardColor

Hi Brad, I added cardColor on the android side that you can use if you like
cardview-common.ts

import definition = require("cardview");
import contentView = require("ui/content-view");

import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");
import dcolor = require("color");

var cardColorProperty = new dependencyObservable.Property(
    "cardColor",
    "GridLayoutExt",
    new proxy.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.None)
);

export class CardView extends contentView.ContentView implements definition.CardView {
    public static cardColorProperty = cardColorProperty;

    get cardColor(): string {
        return this._getValue(CardView.cardColorProperty);
    }

    set cardColor(value: string) {
        this._setValue(CardView.cardColorProperty, value);
    }

  constructor() {
    super();
  }

  get android(): any {
    return;
  }

  get ios(): any {
    return;
  }
}

cardview-android.ts

import common = require("./cardview-common");
import {PropertyMetadata} from "ui/core/proxy";
import {Property, PropertyMetadataSettings} from "ui/core/dependency-observable";
import dcolor = require("color");

global.moduleMerge(common, exports);

import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");

function oncardColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var c = <CardView>data.object;
    c._oncardColorPropertyChanged(data);
}

(<proxy.PropertyMetadata>common.CardView.cardColorProperty.metadata).onSetNativeValue = oncardColorPropertyChanged;

var radiusProp = new Property(
    "radius",
    "CardView",
    new PropertyMetadata(undefined, PropertyMetadataSettings.None)
);
var elevationProp = new Property(
    "elevation",
    "CardView",
    new PropertyMetadata(undefined, PropertyMetadataSettings.None)
);

export class CardView extends common.CardView {
    public _oncardColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
        var c = new dcolor.Color(data.newValue);
        this._android.setCardBackgroundColor(c.android);
    }
    private _androidViewId: any;
    public static radiusProp = radiusProp;
    public static elevationProp = elevationProp;
    private _android: android.support.v7.widget.CardView;

    constructor() {
        super();
    }

    get android(): android.support.v7.widget.CardView {
        return this._android;
    }

    get _nativeView(): android.support.v7.widget.CardView {
        return this._android;
    }

    get radius(): number {
        return this._getValue(CardView.radiusProp);
    }
    set radius(value: number) {
        this._setValue(CardView.radiusProp, value);
    }

    get elevation(): number {
        return this._getValue(CardView.elevationProp);
    }
    set elevation(value: number) {
        this._setValue(CardView.elevationProp, value);
    }

    public _createUI() {
        this._android = new android.support.v7.widget.CardView(this._context);

        if (!this._androidViewId) {
            this._androidViewId = android.view.View.generateViewId();
        }
        this._android.setId(this._androidViewId);

        if (this.radius)
            this._android.setRadius(this.radius);

        if (this.elevation)
            this._android.setCardElevation(this.elevation);

    }
}

Usage :

        <Card:CardView cardColor="yellow">
        </Card:CardView>

Unable to build after installing nativescript-cardview (Error retrieving parent for item 'android:TextAppearance.Material.Widget.Button.Borderless.Colored')

Hello,

After installing the nativescript-cardview plugin, I ran tns run android and started having the following problems. I removed the android platform and re-added it but it made no difference.

Any idea why this might be happening?

...MY_PROJECT...\platforms\android\build\intermediates\res\merged\F0F1\debug\values-v24\values-v24.xml:3: AAPT: Error retrieving parent for item: No resou
rce found that matches the given name 'android:TextAppearance.Material.Widget.Button.Borderless.Colored'.

...MY_PROJECT...\platforms\android\build\intermediates\res\merged\F0F1\debug\values-v24\values-v24.xml:4: AAPT: Error retrieving parent for item: No resou
rce found that matches the given name 'android:TextAppearance.Material.Widget.Button.Colored'.

...MY_PROJECT...\platforms\android\build\intermediates\res\merged\F0F1\debug\values-v24\values-v24.xml:3: error: Error retrieving parent for item: No reso
urce found that matches the given name 'android:TextAppearance.Material.Widget.Button.Borderless.Colored'.

...MY_PROJECT...\platforms\android\build\intermediates\res\merged\F0F1\debug\values-v24\values-v24.xml:4: error: Error retrieving parent for item: No reso
urce found that matches the given name 'android:TextAppearance.Material.Widget.Button.Colored'.


:processF0F1DebugResources FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':processF0F1DebugResources'.
> com.android.ide.common.process.ProcessException: Failed to execute aapt

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Issues with iOS, build failing

I started with card view on Android and it was working perfectly fine, then I had to test for iOS and here things started to get tricky. My code was throwing an error on MaterialCard.swift, so I tried running the demo you have available, and the project was throwing the same error. I also tried to run it on 2 different systems hoping that there was some configuration issue on one of them, but both of my systems were giving the error. I also tried opening the .xcodeproj file and .xcworkspace as per suggestions in the closed issues, but that didn't work either.
Here is the error log:

/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:13:5: error: expected declaration
    open var cornerRadius: CGFloat = 2
    ^
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:13:9: error: consecutive declarations on a line must be separated by ';'
    open var cornerRadius: CGFloat = 2
        ^
        ;
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:15:5: error: expected declaration
    open var shadowOffsetWidth: Int = 0
    ^
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:15:9: error: consecutive declarations on a line must be separated by ';'
    open var shadowOffsetWidth: Int = 0
        ^
        ;
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:16:5: error: expected declaration
    open var shadowOffsetHeight: Int = 2
    ^
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:16:9: error: consecutive declarations on a line must be separated by ';'
    open var shadowOffsetHeight: Int = 2
        ^
        ;
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:17:5: error: expected declaration
    open var shadowColor: UIColor? = UIColor.black
    ^
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:17:9: error: consecutive declarations on a line must be separated by ';'
    open var shadowColor: UIColor? = UIColor.black
        ^
        ;
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:18:5: error: expected declaration
    open var shadowOpacity: Float = 0.4
    ^
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:18:9: error: consecutive declarations on a line must be separated by ';'
    open var shadowOpacity: Float = 0.4
        ^
        ;
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:20:14: error: expected declaration
    override open func layoutSubviews() {
             ^
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:20:13: error: consecutive declarations on a line must be separated by ';'
    override open func layoutSubviews() {
            ^
            ;
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:20:14: error: expected declaration
    override open func layoutSubviews() {
             ^
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:20:18: error: consecutive declarations on a line must be separated by ';'
    override open func layoutSubviews() {
                 ^
                 ;
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:20:24: error: overriding instance method must be as accessible as the declaration it overrides
    override open func layoutSubviews() {
                       ^
                  public 
UIKit.UIView:23:17: note: overridden declaration is here
    public func layoutSubviews()
                ^
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:20:24: error: overriding declaration requires an 'override' keyword
    override open func layoutSubviews() {
                       ^
                  override 
UIKit.UIView:23:17: note: overridden declaration is here
    public func layoutSubviews()
                ^
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:17:38: error: type 'UIColor' has no member 'black'
    open var shadowColor: UIColor? = UIColor.black
                                     ^~~~~~~ ~~~~~
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:26:40: error: value of type 'UIColor' has no member 'cgColor'
        layer.shadowColor = shadowColor?.cgColor
                            ~~~~~~~~~~~^ ~~~~~~~
/Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift:29:28: error: value of type 'UIBezierPath' has no member 'cgPath'
        layer.shadowPath = shadowPath.cgPath
                           ^~~~~~~~~~ ~~~~~~

** BUILD FAILED **


The following build commands failed:
	CompileSwift normal x86_64 /Users/sudhanshu/Downloads/nativescript-cardview-master/demo/platforms/ios/Pods/MaterialCard/MaterialCard/Classes/MaterialCard.swift
	CompileSwiftSources normal x86_64 com.apple.xcode.tools.swift.compiler
(2 failures)
Command xcodebuild failed with exit code 65

Please help me.

IOS problem: color undefind

I want to tell about problem with color. It's not trivial problem because we can see this problem when you will try to navigate on home page with ClearHistory.

In my opinion It happened because you haven't a condition of checking on "undefined"/"null" value in cardview-common.js (line: 43) and cardview.ios.js (lines: 34, 37, 49) files. I wrote this and it has worked:

• if (value !== undefined && "ios" in value && value.ios){
  this.nativeView.backgroundColor = value.ios;
  }
• if (!value.color || value.color === undefined){
  value.color = "black";
  }
  this.nativeView.backgroundColor = new color_1.Color(value.color + "").ios;
• if (value !== undefined && "ios" in value && value.ios){
  this.nativeView.layer.shadowColor = value.ios.CGColor;
  }

It's a text of error when i try to run this.routerExtensions.navigate(["/"], {clearHistory: true});
CONSOLE ERROR file:///app/tns_modules/@angular/core/./bundles/core.umd.js:1091:24: ERROR Error: Uncaught (in promise): Error: Invalid color: undefined
Color@file:///app/tns_modules/tns-core-modules/color/color-common.js:24:36 [angular]
Color@file:///app/tns_modules/tns-core-modules/color/color.js:6:47 [angular]
file:///app/tns_modules/nativescript-cardview/cardview.js:41:54 [angular]

If i understand the situation correctly it happened because new version of NS does't prefer "undefined" or "null" or empty value of color. But I don't understand why it happened when i refresh application by the command with param ClearHistory. Maybe I forgot something or did something wrong?
Sorry for my English if I have a mistakes.

My package.json
"dependencies": {
"@angular/animations": "~4.0.0",
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"nativescript-angular": "~3.0.0",
"nativescript-cardview": "^2.0.2",
"nativescript-carousel": "^3.1.0",
"nativescript-gradient": "^2.0.0",
"nativescript-iqkeyboardmanager": "^1.1.0",
"nativescript-ngx-fonticon": "^2.2.1",
"nativescript-telerik-ui": "^3.0.4",
"nativescript-theme-core": "~1.0.4",
"nativescript-videoplayer": "^3.0.9",
"nativescript-youtube-parser": "^1.1.0",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.2.0",
"tns-core-modules": "^3.1.0",
"tns-platform-declarations": "^3.1.0",
"zone.js": "~0.8.2"
},
"devDependencies": {
"babel-traverse": "6.4.5",
"babel-types": "6.4.5",
"babylon": "6.4.5",
"lazy": "1.0.11",
"nativescript-dev-android-snapshot": "^0..",
"nativescript-dev-typescript": "^0.4.0",
"tns-platform-declarations": "^3.1.0",
"typescript": "~2.2.1"
}

toggle shadow on card with clicks doesn't work on android

I wanted to use the shadows to indicate what the user selected starting with no shadow and then showing the shadow when tapped one of the cards.
On iOS it works very good. Only on android it does not work that good. It always starts with a shadow and only works after the first click on it.
it seems as if the initial set value is not picked up by the android version.

Investigate shadowOffset with latest changes for iOS

@manijak I would like to release a new version with your integrated changes, however investigating today presented some trouble. I can't get the shadowOffset to change. Currently your implementation ends up with the shadow always being cast upwards? See screenshot.
The default state should probably be with a subtle shadow cast 1-2 points to the right and down (definitely not upwards I don't think).

Could you investigate this and push any changes to a PR to fix?
Then we can get a new version out with this. Thanks again.

Android CardView - background color problem

I've added the card view to a project using NativeScript-Angular but adding backgroundColor="#fff" or cardView.backgroundColor = new Color("#FFFFFF"); causes the following error... Does the error make sense or could it be a NativeScript-Angular thing?

If I get rid of the background color the element works again defaulting to a light grey.

Thanks,
Matt

java.lang.ClassCastException: com.tns.gen.android.graphics.drawable.ColorDrawable_frnal_prepareExtend_l62_c37__BorderDrawable cannot be cast to android.support.v7.widget.RoundRectDrawableWithShadow
    at android.support.v7.widget.CardViewEclairMr1.getShadowBackground(CardViewEclairMr1.java:159)
    at android.support.v7.widget.CardViewEclairMr1.getMinWidth(CardViewEclairMr1.java:150)
    at android.support.v7.widget.CardView.onMeasure(CardView.java:181)
    at android.view.View.measure(View.java:16497)
    at org.nativescript.widgets.CommonLayoutParams.measureChild(CommonLayoutParams.java:229)
    at org.nativescript.widgets.StackLayout.onMeasure(StackLayout.java:83)
    at android.view.View.measure(View.java:16497)
    at org.nativescript.widgets.CommonLayoutParams.measureChild(CommonLayoutParams.java:229)
    at org.nativescript.widgets.VerticalScrollView.onMeasure(VerticalScrollView.java:80)
    at android.view.View.measure(View.java:16497)
    at org.nativescript.widgets.CommonLayoutParams.measureChild(CommonLayoutParams.java:229)
    at 

adding cardview to angular project

How would I "Make sure you include xmlns:Card="nativescript-cardview" on the Page element" if I am using the "nativescript-angular/router"?

tabviewItme is not supported

am using angular to build my app but when i insert the xml file it show something like "changing the view of an already loaded TabviewItem is currently not supported " and i dont know what went wrong

using css class parameter breaks iOS when navigating

Hi there

Using nativescript 3.0.2 & Angular/Typescript

Using the following in a html layout breaks iOS when navigating to the View. (The navigation doesnt do anything. The app doesnt crash)

this.routerExtensions.navigate(['/main']);

This doesnt work:

<CardView class="cardStyle" elevation="4" radius="1" marginBottom="2" width="100%"> <StackLayout orientation="vertical" padding="20"> </StackLayout> </CardView>

This works:

<CardView elevation="4" radius="1" marginBottom="2" width="100%"> <StackLayout orientation="vertical" padding="20"> </StackLayout> </CardView>

.cardStyle { background-color: #ffffff; }

Everything works in Android as expected.

Typescript Error While Registering CardView In NG2 App

To use CardView in angular 2 app, when we try to register CardView by registerElement('CardView', () => CardView);. Typescript compiler gives error: '() => typeof CardView' is not assignable to parameter of type '() => ViewClass'.

The error is due to in definition file extending CardView by ContentView is missing.

So extending CardView by ContentView in definition file will fix this.

import { ContentView } from 'ui/content-view';
/**
 * Contains the CardView class, which represents a card view component.
 */

export declare class CardView extends ContentView {
...
}

[Android] Image inside CardView gets grayscaled

Source

<Card:CardView class="card">
    <GridLayout rows="auto" columns="auto,*" class="convos-list-wrapper" tap="{{ onItemTap }}">
        <Image row="0" col="0" imageSource="{{ item.image }}" />
        <StackLayout row="0" col="1" orientation="vertical">
            <Label class="h4" text="{{ item.name }}" />
        </StackLayout>
    </GridLayout>
</Card:CardView>

WITH CardView

WITHOUT CardView

Info - Core (not ng2)

┌──────────────────┬────────────────────────────┬────────────────┬─────────────┐
│ Component        │ Current version            │ Latest version │ Information │
│ nativescript     │ 2.4.0-2016-09-18-6687      │ 2.3.0          │ Up to date  │
│ tns-core-modules │ 2.3.0                      │ 2.3.0          │ Up to date  │
│ tns-android      │ 2.4.0-next-2016-09-29-1186 │ 2.3.0          │ Up to date  │
│ tns-ios          │ 2.4.0-2016-9-28-1          │ 2.3.0          │ Up to date  │
└──────────────────┴────────────────────────────┴────────────────┴─────────────┘

Nothing comes up in the adb logcat either. I wish there was more info I could provide ya 😞

Unable to build module

After cloning there is no way to build this package, also there is no style/Styler class in tns-core-modules which are installed with TNS.

Angular Sample on README

Add sample markup for Angular usage with NativeScript.

ping @NathanWalker - if you have a snippet and want to throw my way I can do it if you don't have time. No worries 😄

iOS - Error when uploading App to iTunesConnect

I'm trying to upload an App using Application Loader to iTunesConnect but I'm receiving the following error message:

Just to know, I built the App on AppBuilder from Telerik, downloaded the built App to upload it to iTunesConnect.

Any thoughts?

cardview not working in angular 2

I've been trying to get this working with angular 2 and the card will just not render on iOS or android.

I followed the instructions in #17 and the cardview.ios.js and cardview.android.js files are being executed, but the card is not rendering as it should. This is how the batman demo is rendering...

Any thoughts?

no styles when in a scrollView

As the title says, you wont get the styles of the CardView element when placed inside of a scrollView.

Only confirmed for angular4 builds.

iOS build with Xcode 8 throws "Command xcodebuild failed with exit code 65"

Using the plugin to build a project with Xcode 8 is throwing due to:

=== BUILD TARGET MaterialCard OF PROJECT Pods WITH CONFIGURATION Debug === 

“Use Legacy Swift Language Version” (SWIFT_VERSION) is required 
to be configured correctly for targets which use Swift. 
Use the [Edit > Convert > To Current Swift Syntax…] menu to choose a Swift
version or use the Build Settings editor to configure the build setting directly. 

And the project build via Xcode returns error:

ld: framework not found MaterialCard
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Support for Nativescript 3.0?

Support for Nativescript 3.0?

Cardview fails on IOS when running second time tns run command

Cardview works fine on first tns run command. However when I re run the tns command then it fails.

In listview cell selection problem

Hello, cardview in listview. when i press the item, cardview background, radius and shadow disappering. Do you have a solution for this?

android.support.v7.CardView is not a function

I am receiving this error when attempting to use this plugin. The error originates from line 23 of cardview.android.js. Any idea why this could be happening?

I am using the mark up provided in the readme.md, so I thought this would work straight out of he box.

TypeError: Cannot read property 'newDrawable' of null

Anytime I add a <CardView></CardView> to anywhere in my app, I get the following error:

An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException: 
Calling js method onCreateViewHolder failed

TypeError: Cannot read property 'newDrawable' of null
File: "file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/tns-core-modules/ui/core/view/view.js, line: 389, column: 53

StackTrace: 
	Frame: function:'View.(anonymous function)', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 389, column: 54
	Frame: function:'applyAllNativeSetters', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 964, column: 95
	Frame: function:'initNativeView', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 894, column: 9
	Frame: function:'ViewBase.onResumeNativeUpdates', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 671, column: 22
	Frame: function:'ViewBase._resumeNativeUpdates', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 237, column: 18
	Frame: function:'ViewBase.onLoaded', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 215, column: 14
	Frame: function:'View.onLoaded', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'ViewBase._addViewCore', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 471, column: 18
	Frame: function:'ViewBase._addView', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 446, column: 14
	Frame: function:'LayoutBaseCommon.insertChild', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js', line: 49, column: 14
	Frame: function:'ViewUtil.insertChild', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/nativescript-angular/view-util.js', line: 46, column: 24
	Frame: function:'NativeScriptRenderer.insertBefore', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/nativescript-angular/renderer.js', line: 78, column: 27
	Frame: function:'DebugRenderer2.insertBefore', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 13343, column: 23
	Frame: function:'execRenderNodeAction', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 9086, column: 22
	Frame: function:'visitRenderNode', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 9057, column: 13
	Frame: function:'visitSiblingRenderNodes', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 8988, column: 13
	Frame: function:'visitRootRenderNodes', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 8972, column: 5
	Frame: function:'renderAttachEmbeddedView', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 9786, column: 5
	Frame: function:'attachEmbeddedView', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 9666, column: 5
	Frame: function:'ViewContainerRef_.insert', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 10133, column: 9
	Frame: function:'ViewContainerRef_.createEmbeddedView', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 10104, column: 14
	Frame: function:'RadListViewComponent._listView.itemViewLoader', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/nativescript-telerik-ui/listview/angular/listview-directives.js', line: 40, column: 55
	Frame: function:'RadListView.getViewForViewType', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/nativescript-telerik-ui/listview/listview-common.js', line: 412, column: 28
	Frame: function:'ListViewAdapter.onCreateViewHolder', file:'file:///data/data/org.nativescript.PizzaApp/files/app/tns_modules/nativescript-telerik-ui/listview/listview.js', line: 64, column: 33


	at com.tns.Runtime.callJSMethodNative(Native Method)
	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1043)
	at com.tns.Runtime.callJSMethodImpl(Runtime.java:925)
	at com.tns.Runtime.callJSMethod(Runtime.java:912)
	at com.tns.Runtime.callJSMethod(Runtime.java:896)
	at com.tns.Runtime.callJSMethod(Runtime.java:888)
	at com.tns.gen.com.telerik.widget.list.ListViewAdapter_frnal_ts_helpers_l58_c38__ListViewAdapter.onCreateViewHolder(com.telerik.widget.list.ListViewAdapter.java)
	at com.telerik.widget.list.ListViewWrapperAdapter.onCreateViewHolder(ListViewWrapperAdapter.java:459)
	at com.telerik.widget.list.ListViewWrapperAdapter.onCreateViewHolder(ListViewWrapperAdapter.java:20)
	at android.support.v7.widget.RecyclerView$Adapter.createViewHolder(RecyclerView.java:6367)
	at android.support.v7.widget.RecyclerView$Recycler.tryGetViewHolderForPositionByDeadline(RecyclerView.java:5555)
	at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5440)
	at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5436)
	at android.support.v7.widget.LinearLayoutManager$LayoutState.next(LinearLayoutManager.java:2224)
	at android.support.v7.widget.LinearLayoutManager.layoutChunk(LinearLayoutManager.java:1551)
	at android.support.v7.widget.LinearLayoutManager.fill(LinearLayoutManager.java:1511)
	at android.support.v7.widget.LinearLayoutManager.onLayoutChildren(LinearLayoutManager.java:595)
	at android.support.v7.widget.RecyclerView.dispatchLayoutStep2(RecyclerView.java:3583)
	at android.support.v7.widget.RecyclerView.onMeasure(RecyclerView.java:3025)
	at com.telerik.widget.list.RadListView.onMeasure(RadListView.java:570)
	at android.view.View.measure(View.java:19883)
	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6087)
	at android.widget.FrameLayout.onMeasure(FrameLayout.java:185)
	at android.view.View.measure(View.java:19883)
	at org.nativescript.widgets.CommonLayoutParams.measureChild(CommonLayoutParams.java:262)
	at org.nativescript.widgets.StackLayout.onMeasure(StackLayout.java:83)
	at android.view.View.measure(View.java:19883)
	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6087)
	at android.widget.FrameLayout.onMeasure(FrameLayout.java:185)
	at android.view.View.measure(View.java:19883)
	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6087)
	at android.widget.FrameLayout.onMeasure(FrameLayout.java:185)
	at android.view.View.measure(View.java:19883)
	at org.nativescript.widgets.CommonLayoutParams.measureChild(CommonLayoutParams.java:262)
	at org.nativescript.widgets.MeasureHelper.measureChildFixedColumnsAndRows(GridLayout.java:1059)
	at org.nativescript.widgets.MeasureHelper.measure(GridLayout.java:869)
	at org.nativescript.widgets.GridLayout.onMeasure(GridLayout.java:279)
	at android.view.View.measure(View.java:19883)
	at org.nativescript.widgets.CommonLayoutParams.measureChild(CommonLayoutParams.java:262)
	at org.nativescript.widgets.ContentLayout.onMeasure(ContentLayout.java:32)
	at android.view.View.measure(View.java:19883)
	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6087)
	at android.widget.FrameLayout.onMeasure(FrameLayout.java:185)
	at android.view.View.measure(View.java:19883)
	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6087)
	at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1464)
	at android.widget.LinearLayout.measureVertical(LinearLayout.java:758)
	at android.widget.LinearLayout.onMeasure(LinearLayout.java:640)
	at android.view.View.measure(View.java:19883)
	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6087)
	at android.widget.FrameLayout.onMeasure(FrameLayout.java:185)
	at com.android.internal.policy.DecorView.onMeasure(DecorView.java:689)
	at android.view.View.measure(View.java:19883)
	at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:2293)
	at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1384)
	at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1637)
	at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1272)
	at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6408)
	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:874)
	at android.view.Choreographer.doCallbacks(Choreographer.java:686)
	at android.view.Choreographer.doFrame(Choreographer.java:621)
	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:860)
	at android.os.Handler.handleCallback(Handler.java:751)
	at android.os.Handler.dispatchMessage(Handler.java:95)
	at android.os.Looper.loop(Looper.java:154)
	at android.app.ActivityThread.main(ActivityThread.java:6165)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:888)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:778)

Using:
{N} + Angular(~3.0.0)
tns-android 3.1.1
tns --version: 3.1.3

iOS problem

Problem build on iOS

Error when run on emulator

Hi,
i have tried the demo inside gits file and i have received messages like this,

node_modules/nativescript-cardview/index.d.ts(1,15): error TS2306: File '/Users/artemist/Documents/NativeScripts/nativescri
pt-cardview/demo/node_modules/nativescript-cardview/cardview.d.ts' is not a module.

TypeScript compiler failed with exit code 1

What does this mean?

shadowRadius

shadowRadius (for iOS) works but it's not documented.

Android 5.1.1, {N} 1.7.1, CardView strange

I'm seeing this with the current state of the plugin with those versions?

NativeScript Card View plugin support for Apps using Angular 2

Would like to see the Card View plugin being supported in NativeScript Apps using Angular 2.

creating cardview dynamically

how would one go about creating a cardview dynamically from js ?

Not working in Android

I have installed cardview, this is installed with in parent node_module where tns-core-module resides.
I have updated my .xml page to include it like that way you have told, when I emulate it breaks saying
nativescript-cardview not found on .xml page when trying to build the ui. So I tried including the model in .page.js files with both relative and absolute path to module again it says not found.

I am not using any angular 2 here, I found some solutions but things are not working.

angular version

is there angular version for this repo

Ripple effect suggestion

Hi is it has any prop for ripple effect ?

shadow direction android

is there any way to set the direction of the shadow for android? i want to make a bottom navigation panel but the shadow always goes to bottom so i cant get shadow on top of the menu

bug on IOS only. Android looks perfect

Project successfully prepared (iOS)
Executing after-prepare hook from /Users/piotrz/Projekty/ITR/itr-medandlife-energetyka-mobile/Med and Life/hooks/after-prepare/nativescript-dev-sass.js
Successfully transferred login.component.html.
Refreshing application...
Successfully synced application org.nativescript.MedandLife on device 76D91E5B-D795-4669-9EB5-573BEDAD6E6A.
1 0x10624fbc8 -[TNSRuntime executeModule:referredBy:]
2 0x105cf1c71 main
3 0x10bbe5d81 start
undefined:7:68: JS ERROR TypeError: undefined is not an object (evaluating 'b.prototype')

release 1.1.3 seems to be missing *.js files

default style issues

Hi guys, testing on iOS with the last version of NativeScript:

Let me know what you think, Nicholls

Cannot read property "newDrawable" of null, undefine

My tns version - 3.3.0
iOS work perfectly but having problem with android device emulator, on app start I get screen with text "Cannot read property "newDrawable" of null, undefine" but I dont have any error in console only on device screen, any idea why?

CardView doesn't refresh

Hello,
After updating my app to nativescript 3.0 and also update your plugin, now my app my CardView doesn't refresh.
For example, when I load for the first time is not showing the values, but when I refresh the page, now the data is coming.
To see a new data, always I have to refresh, is not upgrading the data immediately.

This is the code:

///xml page/////



<gv:GridView id="_listViewKPICardsOTS" backgroundColor="#f6f6f6" items="{{ _kpiCards }}" colWidth="{{ screenWidthsCol }}" rowHeight="85">
gv:GridView.itemTemplate

<Card:CardView class="cardStyle" tap="navigateOnCardClick">






</Card:CardView>

</gv:GridView.itemTemplate>
</gv:GridView>

************** Package .json ********

{
"description": "NativeScript Application",
"license": "SEE LICENSE IN ",
"readme": "NativeScript Application",
"repository": "",
"nativescript": {
"id": "com.xxx.mbrxx",
"tns-ios": {
"version": "3.0.0"
},
"tns-android": {
"version": "3.0.0"
}
},
"dependencies": {
"@angular/common": "^4.1.1",
"@angular/compiler": "^4.1.1",
"@angular/core": "^4.1.1",
"@angular/forms": "^4.1.1",
"@angular/http": "^4.1.1",
"@angular/platform-browser": "^4.1.1",
"@angular/router": "^4.1.1",
"base-64": "^0.1.0",
"nativescript-angular": "^3.0.0",
"nativescript-cardview": "^2.0.0-rc.0",
"nativescript-collapsing-header": "2.0.0",
"nativescript-exit": "^1.0.0",
"nativescript-fancyalert": "^1.1.2",
"nativescript-fingerprint-auth": "4.0.0",
"nativescript-floatingactionbutton": "3.0.0",
"nativescript-grid-view": "3.0.0",
"nativescript-intl": "3.0.0",
"nativescript-loading-indicator": "2.3.2",
"nativescript-master-technology": "^1.1.0",
"nativescript-oauth": "file:../nativescript-oauth",
"nativescript-statusbar": "1.0.0",
"nativescript-telerik-ui": "2.0.1",
"rxjs": "^5.4.0",
"tns-core-modules": "^3.0.0",
"utf8": "^2.1.2",
"zone.js": "^0.8.10"
},
"devDependencies": {
"babel-traverse": "^6.22.1",
"babel-types": "^6.22.0",
"babylon": "^6.15.0",
"filewalker": "^0.1.3",
"lazy": "1.0.11",
"nativescript-dev-typescript": "^0.4.4",
"tns-platform-declarations": "^3.0.0",
"typescript": "^2.3.2"
}
}

Can't find variable MaterialCardView on iOS

When I try and use the plugin, it throws an error Can't find variable MaterialCardView on iOS. If I try and do a tns debug ios --emulator, it throws a wall of Swift linking errors.

System

NativeScript 1.7
iOS 9.2
Xcode 7.2.1

Steps To Reproduce

tns create my-app && cd my-app && tns platform add ios
tns plugin add nativescript-cardview

Add the following markup to your page

<page xmlns="http://schemas.nativescript.org/tns.xsd"                
      xmlns:card="nativescript-cardview">

      <stack-layout><!-- Home page contents -->
        <card:CardView margin="10">
           <grid-layout rows="200, auto, auto" columns="auto, auto, *">
               <image src="~/images/batman.jpg" stretch="aspectFill" colSpan="3" row="0" />
               <label text="Batman wants to be friends?" class="info" textWrap="true" row="1" colSpan="3" />          
               <button text="DECLINE" tap="goAway" class="clear-btn blue" row="2" col="0" />
               <button text="ACCEPT" class="clear-btn blue" row="2" col="1" />
           </grid-layout>
        </card:CardView>
      </stack-layout>

</page>

Run in the emulator

tns deploy ios --emulator

Error is thrown

Mar 18 16:37:11 hollandmac nativescriptnova[6301]: file:///app/tns_modules/ui/builder/builder.js:154:56: JS ERROR Error: Building UI from XML. @file:///app/pages/cards/simple-card.xml:16:9
     ↳Module '/Users/burkeholland/Library/Developer/CoreSimulator/Devices/FAE7B936-79CE-46C4-859F-65506A603837/data/Containers/Bundle/Application/4B9CC923-5319-4FD0-AE7D-37449DA4E814/nativescriptnova.app/app/tns_modules/nativescript-cardview' not found for element 'nativescript-cardview:CardView'.
       ↳Can't find variable: MaterialCardView
Mar 18 16:37:11 hollandmac com.apple.CoreSimulator.SimDevice.FAE7B936-79CE-46C4-859F-65506A603837.launchd_sim[2575] (UIKitApplication:org.nativescript.nativescriptnova[0x330e][6301]): Service exited due to signal: Segmentation fault: 11

Run tns debug ios --emulator. I've attached the text file with the linker errors.
linker.txt

Suggested Solution

I'm pretty sure iOS simply can't build that CocoaPod. I noticed that the target version for the Pod is 8.0, but that should just be the minimum version, not the absolute target version. I check the CocoaPod docs for Podfiles and there was no mention of a minimum version, only a target version.

I have no idea.