Evaluating ImageSourceValue.ios


#1

I dont know what title this Topic should have so i just gave the name of the error.
This is currently my HomePage:

and it’s code:

<FlexboxLayout flexDirection="column">
        <AbsoluteLayout>
    <image class="imageRhombus" src="res://rhombus" stretch="enum"></image>
  </AbsoluteLayout>
    <label class="text-title" text="FastCanteen"></label>
    <StackLayout orientation="vertical" flexGrow="1" backgroundColor="transparent">
        <StackLayout marginTop="20" marginBottom="30">
            <image class="imageAccountCircle" src="res://ic_account_circle_white"></image>
            <Label id="userNameTop" class="labelName" textWrap="true"></Label>
            <Label class="labelNIF" [text]=user.nif textWrap="true"></Label>
        </StackLayout>
        <StackLayout>
            <StackLayout marginLeft="70" marginRight="70" marginBottom="60" backgroundColor="#444444" borderRadius="30%" opacity="0.7"
                height="100">
                <Label id="balance" class="labelBalanceValue"></Label>
                <Label class="labelTextBalance" text="Available Balance"></Label>
            </StackLayout>
        </StackLayout>
        <div *ngIf="isVisible">
            <StackLayout (tap)="accountTransactions()" [nsRouterLink]="['/main']" pageTransition="slide" marginBottom="10" marginLeft="20"
                marginRight="20" verticalAlignment="bottom" backgroundColor="#444444">
                <GridLayout rows="auto auto auto" columns="* 75">
                    <Label class="labelLastBill" text="Last Bill" textWrap="true" row="0" col="0" marginTop="10"></Label>
                    <Label id="valueLastBill" class="labelValue" textWrap="true" row="1" col="0"></Label>
                    <Label class="transactionsButtons" text=">" row="1" col="1" marginTop="-5"></Label>
                    <Label id="typeLastBill" class="labelTypeOfBill" textWrap="true" row="2" col="0" marginBottom="10"></Label>
                </GridLayout>
            </StackLayout>
        </div>
    </StackLayout>
    <FlexboxLayout>
        <BottomBar row="1" [items]="items" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)"
            [inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
    </FlexboxLayout>
</FlexboxLayout>

My homePage.Component.ts

import { Page } from "ui/page";
import { Component, OnInit } from "@angular/core";
import { registerElement } from 'nativescript-angular';
import { BottomBar, BottomBarItem, TITLE_STATE, SelectedIndexChangedEventData, Notification } from 'nativescript-bottombar';
import { User } from "../../shared/model/user/user";
import { UserService } from "../../shared/model/user/user.service";
import { MovementService } from "../../shared/model/movement/movement.service";
import { Router, NavigationExtras } from "@angular/router";
import * as colorModule from "tns-core-modules/color";
import { ActivatedRoute } from "@angular/router";
import * as platformModule from "tns-core-modules/platform";
import { Config } from "../../shared/config";
import { Budget } from "../../shared/model/budget/budget";
import listView = require("ui/list-view");
import { Http } from "@angular/http";
var view = require("ui/core/view");
var applicationSettings = require("application-settings");

registerElement('BottomBar', () => BottomBar);

@Component({
    selector: "homePage",
    providers: [UserService, MovementService],
    templateUrl: "pages/homePage/homePage.html",
    styleUrls: ["pages/homePage/homePage-common.css", "pages/homePage/homePage.css"]
})
export class HomePageComponent implements OnInit {
    public hidden: boolean;
    public titleState: TITLE_STATE;
    public _bar: BottomBar;
    public inactiveColor: string;
    public accentColor: string;
    public user: User;
    public budget: Budget;
    public nameFromAPI: string;
    public value: string;
    public type: string;
    public isVisible: boolean = true;;
    public height: number;
    public width: number;


    constructor(private http: Http, private router: Router, private page: Page, private route: ActivatedRoute, private userService: UserService, private movementService: MovementService) {
        this.route.queryParams.subscribe(params => {
            this.user = JSON.parse(params["user"]);
        })
        console.log("Inside HomePage");
        console.log("UserToken: " + Config.token);
        this.user.name = this.nameFromAPI;
    }


    public items: Array<BottomBarItem> = [
        new BottomBarItem(0, "Home", "ic_home_black_24dp", "white"),
        new BottomBarItem(1, "Menu", "ic_local_dining_black_24dp", "white"),
        new BottomBarItem(2, "Check-out", "ic_add_a_photo_black_24dp", "white"),
        new BottomBarItem(3, "Transactions", "ic_assignment_black_24dp", "white"),
        new BottomBarItem(4, "Settings", "ic_settings_black_24dp", "white")
    ];

    tabLoaded(event) {
        this._bar = <BottomBar>event.object;
        this.hidden = false;
        this.titleState = TITLE_STATE.ALWAYS_SHOW;
        var Color = colorModule.Color;
        var color = new Color("#8e8e93");
        this.inactiveColor = color.hex;
        this.accentColor = "black";
    }

    ngOnInit() {
        let navigationExtras: NavigationExtras = {
            queryParams: {
                "user": JSON.stringify({
                    "name": this.user.name,
                    "nif": this.user.nif,
                    "password": this.user.password
                })
            }
        };
        this.page.actionBarHidden = true;
        this.page.backgroundImage = "res://bitmap";

        // Available Balance
        this.budget = new Budget();
        var tmp;
        /*
        this.userService.readBalance(applicationSettings.getString("user.token", "default"))
            .subscribe((res) => {
                this.budget.amount = res;
                tmp = res;
                //console.log("Budget Value on Home Page : " + this.budget.amount);
                var htmlBalance;
                htmlBalance = this.page.getViewById("balance");
                if (typeof htmlBalance == "undefined") {
                    alert("Balance undefined!");
                } else {
                    if (Number.isInteger(this.budget.amount)) {
                        htmlBalance.text = this.budget.amount + ".00 €";
                    } else {
                        var number = this.decimalPlaces(this.budget.amount);
                        if (number == 1) {
                            htmlBalance.text = this.budget.amount + "0 €";
                        } else {
                            htmlBalance.text = this.budget.amount + "€";
                        }
                    }

                }
            },
            (error) => alert(error)
            );
*/
        var htmlBalance;
        htmlBalance = this.page.getViewById("balance");
        htmlBalance.text = "50.00 €";
        //NameByToken
        /*
        this.userService.nameByToken(applicationSettings.getString("user.token", "default"))
            .subscribe((res) => {
                this.nameFromAPI = res.Result.message;
                //console.log("Username on Home Page[From Method] : " + res.Result.message);
                var htmlName;
                htmlName = this.page.getViewById("userNameTop");
                if (typeof htmlName == "undefined") {
                    alert("Name undefined!");
                } else {
                    htmlName.text = this.nameFromAPI;
                }
            },
            (error) => alert(error)
            );
*/
        var htmlName;
        htmlName = this.page.getViewById("userNameTop");
        htmlName.text = "Joao";
        /*
//LastMovemnet
this.movementService.lastMovement(applicationSettings.getString("user.token", "default"))
    .subscribe((res) => {
        this.value = res.Value;
        this.type = res.Type;
        //verificar que values nao vem a null
        if (this.type != "undefined" && this.value != "undefined") {
            this.isVisible = true;

            var htmlValueLastBill;
            htmlValueLastBill = this.page.getViewById("valueLastBill");
            if (typeof htmlValueLastBill == "undefined") {
                alert("Value undefined!");
            } else {
                htmlValueLastBill.text = "- € " + this.value;
            }

            //Portuguese -> English
            this.type = this.type.trim();
            if (this.type == "Pagamento") {
                this.type = "Payment";
            }
            if (this.type == "Carregamento") {
                this.type = "Bank Transaction";
            }
            if (this.type == "Estorno") {
                this.type = "Refund";
            }


            var htmlTypeLastBill;
            htmlTypeLastBill = this.page.getViewById("typeLastBill");
            if (typeof htmlTypeLastBill == "undefined") {
                alert("Type undefined!");
            } else {
                htmlTypeLastBill.text = this.type;
            }
        } else {
            this.isVisible = false;
        }

    },
    (error) => alert(error)
    );

*/
        this.isVisible = true;
        var htmlValueLastBill;
        htmlValueLastBill = this.page.getViewById("valueLastBill");
        //htmlValueLastBill.text = "3";
        var htmlTypeLastBill;
        htmlTypeLastBill = this.page.getViewById("typeLastBill");
        //htmlTypeLastBill.text = "Payment";
    }

    decimalPlaces(num) {
        var match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
        if (!match) { return 0; }
        return Math.max(
            0,
            // Number of digits right of decimal point.
            (match[1] ? match[1].length : 0)
            // Adjust for scientific notation.
            - (match[2] ? +match[2] : 0));
    }

    accountTransactions() {
        let navigationExtras: NavigationExtras = {
            queryParams: {
                "user": JSON.stringify({
                    "name": this.user.name,
                    "nif": this.user.nif,
                    "password": this.user.password
                })
            }
        };
        this.router.navigate(["/transactions"], navigationExtras);
    }

    tabSelected(args: SelectedIndexChangedEventData) {
        switch (args.newIndex) {
            case 0: {
                let navigationExtras: NavigationExtras = {
                    queryParams: {
                        "user": JSON.stringify({
                            "name": this.user.name,
                            "nif": this.user.nif,
                            "password": this.user.password
                        })
                    }
                };
                this.router.navigate(["/homePage"], navigationExtras);
                break;
            }
            case 1: {
                let navigationExtras: NavigationExtras = {
                    queryParams: {
                        "user": JSON.stringify({
                            "name": this.user.name,
                            "nif": this.user.nif,
                            "password": this.user.password
                        })
                    }
                };
                this.router.navigate(["/menu"], navigationExtras);
                break;
            }
            case 2: {
                let navigationExtras: NavigationExtras = {
                    queryParams: {
                        "user": JSON.stringify({
                            "name": this.user.name,
                            "nif": this.user.nif,
                            "password": this.user.password
                        })
                    }
                };
                this.router.navigate(["/payment"], navigationExtras);
                break;
            }
            case 3: {
                let navigationExtras: NavigationExtras = {
                    queryParams: {
                        "user": JSON.stringify({
                            "name": this.user.name,
                            "nif": this.user.nif,
                            "password": this.user.password
                        })
                    }
                };
                this.router.navigate(["/transactions"], navigationExtras);
                break;
            }
            case 4: {
                let navigationExtras: NavigationExtras = {
                    queryParams: {
                        "user": JSON.stringify({
                            "name": this.user.name,
                            "nif": this.user.nif,
                            "password": this.user.password
                        })
                    }
                };
                this.router.navigate(["/userSettings"], navigationExtras);
                break;
            }

        }
    }
}

You can see that there is a black rectangle at the end. Well on that rectangle it is supposed to appear the Bottombar. I don’t know what is the problem regarding that.

The error i am seeing is the following:


CONSOLE ERROR file:///app/tns_modules/@angular/core/./bundles/core.umd.js:1091:24: ERROR Error: Uncaught (in promise): TypeError: null is not an object (evaluating 'imageSourceValue.ios')
	file:///app/tns_modules/nativescript-bottombar/src/ios/bottombar.js:77:39
	forEach@[native code]
	createItems@file:///app/tns_modules/nativescript-bottombar/src/ios/bottombar.js:68:22
	file:///app/tns_modules/nativescript-bottombar/src/ios/bottombar.js:63:25
	set@file:///app/tns_modules/tns-core-modules/ui/core/properties/properties.js:88:40
	setPropertyInternal@file:///app/tns_modules/nativescript-angular/view-util.js:192:17
	setProperty@file:///app/tns_modules/nativescript-angular/view-util.js:155:37
	setProperty@file:///app/tns_modules/nativescript-angular/renderer.js:133:41
	setProperty@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:13262:34
	setElementProperty@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9537:30
	checkAndUpdateElementValue@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9456:31
	checkAndUpdateElementInline@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9390:50
	checkAndUpdateNodeInline@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:12083:50
	debugCheckAndUpdateNode@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:12687:64
	debugCheckRenderNodeFn@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:12666:36
	
	checkAndUpdateView@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:12030:28
	callViewAction@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:12340:35
	execComponentViewsAction@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:12286:27
	checkAndUpdateView@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:12031:29
	callWithDebugContext@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:13013:47
	detectChanges@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:10122:81
	activateOnGoForward@file:///app/tns_modules/nativescript-angular/router/page-router-outlet.js:169:70
	activateWith@file:///app/tns_modules/nativescript-angular/router/page-router-outlet.js:139:37
	placeComponentIntoOutlet@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4515:28
	activateRoutes@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4496:50
	file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4432:72
	forEach@[native code]
	activateChildRoutes@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4432:36
	activate@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4406:33
	file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4023:30
	file:///app/tns_modules/rxjs/Observable.js:107:25
	__tryOrSetError@file:///app/tns_modules/rxjs/Subscriber.js:243:20
	next@file:///app/tns_modules/rxjs/Subscriber.js:185:42
	_next@file:///app/tns_modules/rxjs/Subscriber.js:125:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_next@file:///app/tns_modules/rxjs/operator/map.js:83:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34
	_next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_next@file:///app/tns_modules/rxjs/operator/map.js:83:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_subscribe@file:///app/tns_modules/rxjs/observable/ScalarObservable.js:49:28
	_trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35
	subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	_innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55
	_tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23
	_next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34
	_next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_next@file:///app/tns_modules/rxjs/operator/map.js:83:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_complete@file:///app/tns_modules/rxjs/operator/reduce.js:119:34
	complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27
	_complete@file:///app/tns_modules/rxjs/operator/mergeMap.js:135:38
	complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27
	_subscribe@file:///app/tns_modules/rxjs/observable/ArrayObservable.js:116:32
	_trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35
	subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	_innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55
	_tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23
	_next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34
	_next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_next@file:///app/tns_modules/rxjs/operator/map.js:83:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34
	_next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyComplete@file:///app/tns_modules/rxjs/operator/every.js:53:30
	_complete@file:///app/tns_modules/rxjs/operator/every.js:70:28
	complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27
	_complete@file:///app/tns_modules/rxjs/operator/mergeMap.js:135:38
	complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27
	_subscribe@file:///app/tns_modules/rxjs/observable/ArrayObservable.js:116:32
	_trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35
	subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	_innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55
	_tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23
	_next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyComplete@file:///app/tns_modules/rxjs/operator/every.js:53:30
	_complete@file:///app/tns_modules/rxjs/operator/every.js:70:28
	complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27
	_complete@file:///app/tns_modules/rxjs/operator/mergeMap.js:135:38
	complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27
	_subscribe@file:///app/tns_modules/rxjs/observable/ArrayObservable.js:116:32
	_trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35
	subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	_innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55
	_tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23
	_next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_next@file:///app/tns_modules/rxjs/operator/map.js:83:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34
	_next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_next@file:///app/tns_modules/rxjs/operator/map.js:83:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_subscribe@file:///app/tns_modules/rxjs/observable/ScalarObservable.js:49:28
	_trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35
	subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40

I already asked @rhanb help on the subject and he thinks that the problem is not related to the Bottombar Plugin.
So i have no idea why the bottom bar isn’t showing neither why it is giving this wierd bug


#2

Can you also share a screenshot of the iOS resources you’ve added for the Bottombar plugin to your app?


#3

The problem was solved by @rhanb. The problem was where i defined the Array of bottombar items.

Switched

    public items: Array<BottomBarItem> = [
        new BottomBarItem(0, "Home", "ic_home_black_24dp", "white"),
        new BottomBarItem(1, "Menu", "ic_local_dining_black_24dp", "white"),
        new BottomBarItem(2, "Check-out", "ic_add_a_photo_black_24dp", "white"),
        new BottomBarItem(3, "Transactions", "ic_assignment_black_24dp", "white"),
        new BottomBarItem(4, "Settings", "ic_settings_black_24dp", "white")
    ];

this to

    public items: Array<BottomBarItem> = [
        new BottomBarItem(0, "Home", "ic_home", "white"),
        new BottomBarItem(1, "Menu", "ic_local_dining", "white"),
        new BottomBarItem(2, "Check-out", "ic_add_a_photo", "white"),
        new BottomBarItem(3, "Transactions", "ic_assignment", "white"),
        new BottomBarItem(4, "Settings", "ic_settings", "white")
    ];

and it worked!