Issue v 4.0.11 with Nativescript 7 Angular 10 - @nativescript-community/ui-material-floatingactionbutton

[tidusjar]

trafficstars

Which platform(s) does your issue occur on?

• Android

Please, provide the following version numbers that your issue occurs with:

• CLI: 7.0.8)
• Runtime(s): 7.0.0
• Plugin(s):

"dependencies": {
    "@angular/animations": "~10.1.0",
    "@angular/common": "~10.1.0",
    "@angular/compiler": "~10.1.0",
    "@angular/core": "~10.1.0",
    "@angular/forms": "~10.1.0",
    "@angular/platform-browser": "~10.1.0",
    "@angular/platform-browser-dynamic": "~10.1.0",
    "@angular/router": "~10.1.0",
    "@danvick/ngx-translate-nativescript-loader": "^2.0.2",
    "@nativescript-community/ui-material-button": "^4.0.11",
    "@nativescript-community/ui-material-floatingactionbutton": "^4.0.11",
    "@nativescript-community/ui-material-textfield": "^4.0.11",
    "@nativescript/angular": "~10.1.0",
    "@nativescript/core": "~7.0.0",
    "@nativescript/firebase": "^11.0.0",
    "@nativescript/theme": "~2.5.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@nstudio/nativescript-loading-indicator": "^4.0.0",
    "@nstudio/nativescript-pulltorefresh": "^3.0.0",
    "nativescript-barcodescanner": "^4.0.0",
    "nativescript-feedback": "^2.0.0",
    "nativescript-purchase": "^2.0.14",
    "nativescript-ui-listview": "^9.0.2",
    "nativescript-ui-sidedrawer": "~9.0.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~10.1.0",
    "@nativescript/android": "7.0.0",
    "@nativescript/webpack": "~3.0.0",
    "@ngtools/webpack": "~10.1.0",
    "codelyzer": "~6.0.0",
    "node-sass": "^4.14.1",
    "tslint": "~6.1.3",
    "typescript": "~3.9.0"
  },

Please, tell us how to recreate the issue in as much detail as possible.

Getting the following error when using the newest version fromResource() and loadFromResource() are deprecated. Use ImageSource.fromResource[Sync]() instead.

Also it seems that the FAB has taken up the whole page now.

Is there any code involved?

Component

import { FloatingActionButton } from "@nativescript-community/ui-material-floatingactionbutton";
registerElement("MDFloatingActionButton", () => FloatingActionButton);

Html

<MDFloatingActionButton rippleColor="blue" src="res://ic_action_add"></MDFloatingActionButton>

[farfromrefug]

Will fix the warnings. About the size thing can you share a screenshot. Did it work before? What layout is it in? Works perfectly here

[tidusjar]

Full page code:

<ActionBar *ngIf="tv" [title]="tv.title">

    <NavigationButton icon="res://baseline_keyboard_arrow_left_white_48" (tap)="onBack()"></NavigationButton>
    <ActionItem text="{{ 'Details.Tv.RequestSelected' | translate }}" android.position="popup" (tap)="submitRequests()"> </ActionItem>
    <ActionItem text="{{ 'Details.Tv.SelectedSeason' | translate:{value: currentSeason} }}" android.position="popup" (tap)="requestAllSeasons()"> </ActionItem>
    <ActionItem text="{{ 'Details.Tv.AllSeasons' | translate }}" android.position="popup" (tap)="requestAllSeasons()"> </ActionItem>
    <ActionItem text="{{ 'Details.Tv.FirstSeason' | translate }}" android.position="popup" (tap)="requestFirstSeason()"> </ActionItem>
    <ActionItem text="{{ 'Details.Tv.LatestSeason' | translate }}" android.position="popup" (tap)="requestLatestSeason()"> </ActionItem>
</ActionBar>

<MDFloatingActionButton rippleColor="blue" src="res://ic_action_add"></MDFloatingActionButton> 
<TabView *ngIf="tv" (selectedIndexChanged)="indexChanged($event)">
    <ng-container *ngFor="let season of tv.seasonRequests">
        <ListView padding="10" borderRadius="10" *tabItem="{title: season.seasonNumber}" [items]="season.episodes">
            <ng-template let-episode="item">
                <GridLayout columns="*, *, *" padding="10" borderRadius="10">
                    <Label col="0" [text]="episode.title"></Label>
                    <Label *ngIf="!episode.selected && episode.available" col="1" text="{{ 'Common.Available' | translate }}"></Label>
                    <Label *ngIf="!episode.selected && !episode.available && episode.requested && !episode.approved" col="1" text="{{ 'Common.ProcessingRequest' | translate }}"></Label>
                    <Label *ngIf="!episode.selected && !episode.available && episode.approved" col="1" text="{{ 'Common.Approved' | translate }}"></Label>
                    <Label *ngIf="!episode.selected && !episode.requested" col="1" text="{{ 'Common.NotRequested' | translate }}"></Label>
                    <Label *ngIf="episode.selected" col="1" text="{{ 'Details.Tv.Selected' | translate }}"></Label>
                    <Switch [isEnabled]="!episode.available && !episode.requested && !episode.approved" col="2" (checkedChange)="onCheckedChange($event, episode)"></Switch>
                </GridLayout>
            </ng-template>

        </ListView>
    </ng-container>
</TabView>

I'm pretty sure this did work before, but I never fully used the button

[farfromrefug]

I see. Would be best to wrap the button and the tabview inside a gridlayout. Can you try?

[tidusjar]

Yeah apologies that was my stupidly.

[farfromrefug]

@tidusjar no stupidity anywhere !!! Can we close the issue?

[tidusjar]

@farfromrefug was going to close it myself but didn't as thought you'd want to reference this issue for the warning fix. Your choice!

[farfromrefug]

@tidusjar you are right! In fact it is already fix in 5.x