nstudio / nativescript-floatingactionbutton Goto Github PK

View Code? Open in Web Editor NEW

137.0 8.0 33.0 9.11 MB

Material Design Floating Action Button in NativeScript apps.

License: Other

TypeScript 88.59% Ruby 0.24% Shell 7.12% JavaScript 4.05%

nativescript-floatingactionbutton nativescript material-design android ios nativescript-plugin ui-components

nativescript-floatingactionbutton's Introduction

NativeScript-FloatingActionButton

NativeScript plugin for Material Design Floating Action Button UI component.

Installation

Nativescript 7+:

ns plugin add @nstudio/nativescript-floatingactionbutton

NativeScript lower than 7:

tns plugin add @nstudio/[email protected]

Screenshot

Multiple FAB/Swipe Animation Support

Usage

The icon for the FAB can be a local image in your app or an image/icon from the App_Resources.

Plain NativeScript

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
      xmlns:FAB="@nstudio/nativescript-floatingactionbutton">
    <ActionBar title="Native FAB" />
    <grid-layout rows="auto, *">
        <list-view row="1" items="{{ users }}">
            <list-view.itemTemplate>
                <label text="{{ name }}" />
            </list-view.itemTemplate>
        </list-view>
            <FAB:fab tap="fabTap"
                     row="1"
                     icon="'~/assets/ic_add_white.png'"
                     rippleColor="#f1f1f1"
                     class="fab-button" />
    </grid-layout>
</Page>

NativeScript Angular

import { registerElement } from 'nativescript-angular/element-registry';
registerElement(
  'Fab',
  () => require('@nstudio/nativescript-floatingactionbutton').Fab
);

HTML

<StackLayout>
    <FAB (tap)="fabTap()" icon="~/assets/ic_add_white.png" rippleColor="#f1f1f1" class="fab-button"></FAB>
</StackLayout>

NativeScript Vue

import Vue from 'nativescript-vue';

Vue.registerElement(
  'Fab',
  () => require('@nstudio/nativescript-floatingactionbutton').Fab
);

Template

<template>
  <page>
    <grid-layout rows="auto, *">
      <list-view row="1" items="{{ users }}">
        <list-view.itemTemplate>
          <label text="{{ name }}" textWrap="true" />
        </list-view.itemTemplate>
      </list-view>
      <fab
        @tap="fabTap"
        row="1"
        icon="res://ic_add_white"
        rippleColor="#f1f1f1"
        class="fab-button"
      ></fab>
    </grid-layout>
  </page>
</template>

CSS

Recommended CSS styles.

.fab-button {
  height: 70;
  width: 70; /// this is required on iOS - Android does not require width so you might need to adjust styles
  margin: 15;
  background-color: #ff4081;
  horizontal-align: right;
  vertical-align: bottom;
}

Use Icon Fonts

First you need to setup icon fonts as described in NativeScript documentation.

After this, you can use icon fonts on FAB by specifiying the unicode as text and add the fas/far class:

<FAB:fab text="&#xf02a;" class="fab-button fas" />

API

Property	Android	iOS	Description	Note
backgroundColor	X	X	Sets the background color of the button
icon	X	X	Supports the same image source options that NativeScript images support	Required on android
text	X	X	Allows to use text instead of image	Can be styled with `font-*` and `color` CSS properties
rippleColor	X		Ripple color on lollipop devices, it will fill the FAB on pre-lollipop devices	None
hideOnSwipeOfView	X	X	Directs the fab to animate itself in and out on scroll	Pass it the name of the view to monitor for a scroll event example: hideOnSwipeOfView="userListView"
hideAnimationDuration	X	X	How many milliseconds it takes for the button to hide.	Default if not set: 300ms
swipeAnimation	X	X	slideDown, slideUp, slideLeft, slideRight, scale	Default is slideDown
androidScaleType	X		center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY, matrix for more details see Android-Docs	Default is center

iOS Notes

We're using MNFloatingActionButton by Matt Nydam
Width\Height are requried properties
icon is a required property, if left as empty string default will be shown

Running Demo Apps

npm run demo.android

// or

npm run demo.ios

Changelog

Contributors

_{Brad Martin}	_{Steve McNiven-Scott}	_{Nathanael Anderson}	_{Gabriel Marinho}

_{Alexander Vakrilov}	_{Lázaro Danillo Menezes}	_{Jofferson Ramirez Tiquez}	_Ravi

_{Samuel Ikechukwu}	_{Stanimira Vlaeva}

nativescript-floatingactionbutton's People

Contributors

Stargazers

Watchers

nativescript-floatingactionbutton's Issues

Plugin does not work when running AoT with Angular

This plugin looks to not be supporting Ahead of time compilation when inside an {N} + Angular project. It would be great if this gets resolved as it basically makes using this plugin in production not possible.

Error on Android with Angular

Everytime i try to use FAB plugin i get this error

https://drive.google.com/file/d/1hmzfIPZBUnVc0kXlOA8Qx3VGSawEuMae/view?usp=sharing

I'm using NativeScript in "3.4.0" and nativescript-floatingactionbutton: "^4.1.3" . I followed the installation guide,but i'm stuck in this exception.

Cannot read property 'android' of null

I just tried to start a new project and adding the FAB.

tns create new-project
cd new-project
tns platform add android
npm install nativescript-floatingactionbutton
tns run android

And got the following error on Android 5.0.0:

java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.fabproject/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onCreateView failed

TypeError: Cannot read property 'android' of null
File: "/data/data/org.nativescript.fabproject/files/app/tns_modules/nativescript-floatingactionbutton/fab.js, line: 37, column: 53

StackTrace: 
    Frame: function:'FloatingActionButton._createUI', file:'/data/data/org.nativescript.fabproject/files/app/tns_modules/nativescript-floatingactionbutton/fab.js', line: 37, column: 54
    Frame: function:'View._onContextChanged', file:'/data/data/org.nativescript.fabproject/files/app/tns_modules/ui/core/view.js', line: 206, column: 14
    Frame: function:'View._onAttached', file:'/data/data/org.nativescript.fabproject/files/app/tns_modules/ui/core/view.js', line: 164, column: 14
    Frame: function:'eachChild', file:'/data/data/org.nativescript.fabproject/files/app/tns_modules/ui/core/view.js', line: 169, column: 23
    Frame: function:'

I have all the support libraries installed. Any thoughts?

Error after update to NS 3.1.3

I am getting error after update NS 3.1.3.

nativescript     │ 3.1.3           │ 3.1.3          │ Up to date    │
│ tns-core-modules │ 3.1.1           │ 3.1.1          │ Up to date    │
│ tns-android      │ 3.1.1           │ 3.1.1          │ Up to date    │
│ tns-ios          │                 │ 3.1.0          │ Not installed │

xmlns:FAB="nativescript-floatingactionbutton"
<FAB:fab tap="fabTap"
                     row="0"
                     icon="res://ic_add_white"
                     rippleColor="#f1f1f1"
                     class="fab-button" />

FAB plugin with nativescript-carousel crashing App?

I'm trying FAB with nativescript-carousel plugin but now my each page is getting crashed which has FAB?

Pods are not installed on a case sensitive file system

Platform: iOS
Error: Pods are not installed. This will cause a runtime exception on first "usage".
Version: 3.0.0

FAB is not installed on a case sensitive file system.

pod installis looking for a file named Podfile.

The file in this plugin is named PodFile. So it is ignored if your file system is case sensitive.

If I rename this file, the pods are installed.

Floating Action Button not working

Hi, i am using nativescript with javascript and i am trying to add floating Action Button but it is not working.
After following steps with : https://github.com/bradmartin/nativescript-floatingactionbutton/blob/master/README.md
i have a white screen and this message : Cannot read property 'FloatinActionButton' of undefined, undefined

can anybody help please!

Feature Request: Speed Dial

Hi @bradmartin, thank you so much for this awesome plugin.

I was wondering, how complex would be to implement a speed dial for this floating action button?

I know this one for ios is pretty cool because come also with labels: https://github.com/kciter/KCFloatingActionButton

FAB Button and TabView

I'm trying to display the FAB button with a TabView but the TabView isn't displayed.

Here is my code :

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:FAB="nativescript-floatingactionbutton">
    <TabView>
        <TabView.items>
            <TabViewItem title="Tab 1">
                <TabViewItem.view>
                    <Label text="Tab 1" />
                </TabViewItem.view>
            </TabViewItem>
        </TabView.items>
    </TabView>
    <FAB:fab id="fab"
        icon="res://ic_check_white_24dp"
        rippleColor="#f1f1f1"
        class="fab-button" />
</Page>

vertical-align

the floatingactionbutton cant be at the bottom have no idea why

Nativescript versions intended?

Hi, which {N} version this plugin is intended?

On AppBuilder from Telerik uses {N} 1.4 and it doesn't work. App crashes as soon as I call a page with a FAB button.

When using {N} 1.5 on my local files it seems to work fine.

Not sure if its {N} version, but that's an indication.

Also, it's strange that in my local files, nativescript-floatingactionbutton installation doesn't add any dependencies on package.json, but it works fine.

How can I do "showOnSwipeOfView"

Hi,

I saw there are an attribute "hideOnSwipeOfView". From your demo where you use ListView for hideOnSwipeOfView. When scroll down, the FAB hide; and when scroll up, the FAB show. I would like to do other way around - show when scroll down and hide when scroll up (basically on top). How to do this way?

Thanks

[Android] Exception and crash during resume

I'm using this plugin in my NativeScript Angular 2 project and when resuming the app often an exception is thrown causing an app crash.

My html:

<GridLayout rows="auto, *">
    <StackLayout row="1">
        <location></location>

        <CardView shadowColor="#FE00FC" elevation="10" margin="10">
            <StackLayout orientation="vertical">
                <Label text="Numeri Personali" verticalAlignment="center" horizontalAlignment="left" textWrap="true" class="card-header"></Label>
                <StackLayout class="hr-light"></StackLayout>

                [...ListView....]

            </StackLayout>
        </CardView>
    </StackLayout>

    <Fab row="1" class="fab-button"
        (tap)="showAddContactModal()"
        icon="res://ic_add_white_48dp"
        rippleColor="#f1f1f1"
        verticalAlignment="bottom"
        horizontalAlignment="right"
        hideOnSwipeOfView="contactsList">
    </Fab>
</GridLayout>

The full stacktrace:

java.lang.RuntimeException: Unable to resume activity {it.bmsoftware.sosnumbers/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onStart failed
TypeError: Cannot read property 'getViewById' of null
File: "/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/nativescript-floatingactionbutton/fab-common.js, line: 43, column: 41
StackTrace: 
    Frame: function:'FloatingActionButton.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/nativescript-floatingactionbutton/fab-common.js', line: 43, column: 42
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'LayoutBase._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/layouts/layout-base-common.js', line: 146, column: 22
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'LayoutBase._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/layouts/layout-base-common.js', line: 146, column: 22
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'ContentView._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/content-view/content-view.js', line: 65, column: 13
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'LayoutBase._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/layouts/layout-base-common.js', line: 146, column: 22
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'TabView._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/tab-view/tab-view-common.js', line: 243, column: 26
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'LayoutBase._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/layouts/layout-base-common.js', line: 146, column: 22
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'ContentView._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/content-view/content-view.js', line: 65, column: 13
    Frame: function:'Page._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/page/page-common.js', line: 265, column: 41
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'Page.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/page/page-common.js', line: 45, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'Frame._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/frame/frame-common.js', line: 335, column: 13
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'ActivityCallbacksImplementation.onStart', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/frame/frame.js', line: 708, column: 22
    Frame: function:'NativeScriptActivity.onStart', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/frame/activity.js', line: 18, column: 25
        at android.app.ActivityThread.performResumeActivity(ActivityThread.java:3400)
        at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:3440)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1510)
        at android.os.Handler.dispatchMessage(Handler.java:102)
        at android.os.Looper.loop(Looper.java:154)
        at android.app.ActivityThread.main(ActivityThread.java:6077)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:865)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:755)

Caused by: com.tns.NativeScriptException: 
Calling js method onStart failed
TypeError: Cannot read property 'getViewById' of null
File: "/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/nativescript-floatingactionbutton/fab-common.js, line: 43, column: 41
StackTrace: 
    Frame: function:'FloatingActionButton.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/nativescript-floatingactionbutton/fab-common.js', line: 43, column: 42
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'LayoutBase._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/layouts/layout-base-common.js', line: 146, column: 22
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'LayoutBase._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/layouts/layout-base-common.js', line: 146, column: 22
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'ContentView._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/content-view/content-view.js', line: 65, column: 13
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'LayoutBase._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/layouts/layout-base-common.js', line: 146, column: 22
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'TabView._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/tab-view/tab-view-common.js', line: 243, column: 26
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'LayoutBase._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/layouts/layout-base-common.js', line: 146, column: 22
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'ContentView._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/content-view/content-view.js', line: 65, column: 13
    Frame: function:'Page._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/page/page-common.js', line: 265, column: 41
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'Page.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/page/page-common.js', line: 45, column: 35
    Frame: function:'eachChild', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
    Frame: function:'Frame._eachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/frame/frame-common.js', line: 335, column: 13
    Frame: function:'View._loadEachChildView', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
    Frame: function:'View.onLoaded', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
    Frame: function:'ActivityCallbacksImplementation.onStart', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/frame/frame.js', line: 708, column: 22
    Frame: function:'NativeScriptActivity.onStart', file:'/data/data/it.bmsoftware.sosnumbers/files/app/tns_modules/ui/frame/activity.js', line: 18, column: 25
        at com.tns.Runtime.callJSMethodNative(Native Method)
        at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:865)
        at com.tns.Runtime.callJSMethodImpl(Runtime.java:730)
        at com.tns.Runtime.callJSMethod(Runtime.java:716)
        at com.tns.Runtime.callJSMethod(Runtime.java:697)
        at com.tns.Runtime.callJSMethod(Runtime.java:687)
        at com.tns.NativeScriptActivity.onStart(android.app.Activity.java)
        at android.app.Instrumentation.callActivityOnStart(Instrumentation.java:1248)
        at android.app.Activity.performStart(Activity.java:6681)
        at android.app.Activity.performRestart(Activity.java:6755)
        at android.app.Activity.performResume(Activity.java:6760)
        at android.app.ActivityThread.performResumeActivity(ActivityThread.java:3377)
        ... 8 more

Suport of Text and/or FontIcons

thanks for the good plugin.

Would it be possible to add an support for a Text within the FAB and even better the support of Icon Fonts.

Nicky

Build error while compiling java with javac

:compileNativescriptfloatingactionbuttonDebugJavaWithJavac
/Users/louis/Documents/Projects/float/platforms/android/build/generated/source/r/nativescriptfloatingactionbutton/debug/org/nativescript/float/R.java:8: error: <identifier> expected
package org.nativescript.float;
                         ^
/Users/louis/Documents/Projects/float/platforms/android/build/generated/source/buildConfig/nativescriptfloatingactionbutton/debug/org/nativescript/float/BuildConfig.java:4: error: <identifier> expected
package org.nativescript.float;
                         ^
2 errors
:compileNativescriptfloatingactionbuttonDebugJavaWithJavac FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':compileNativescriptfloatingactionbuttonDebugJavaWithJavac'.

Support Text / Font Icon

Add support for text / font-icon.

Request to support HTML file templates for Apps using Angular 2

Excellent plugin for the much needed Floating Action Button!

How do we import/implement the plugin if I'm using a separate HTML file (from the templateURL) as I'm using Angular 2 with NativeScript in my application. I would love to use this plugin in my app but currently, I'm not able to as I'm not using any XML for my views.

FAB creates error messages in Android 8.0

When I visit a page that contains a FAB, I get this error in the console. It doesn't stop the application but I think it causes a little bit slow down. This doesn't happen on iOS.

Console messages are:

01-05 22:29:34.291 16931 16931 W LayerDrawable: 	at com.tns.Runtime.callJSMethodNative(Native Method)
01-05 22:29:34.291 16931 16931 W LayerDrawable: 	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
01-05 22:29:34.291 16931 16931 W LayerDrawable: 	at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
01-05 22:29:34.291 16931 16931 W LayerDrawable: 	at com.tns.Runtime.callJSMethod(Runtime.java:957)
01-05 22:29:34.291 16931 16931 W LayerDrawable: 	at com.tns.Runtime.callJSMethod(Runtime.java:941)
01-05 22:29:34.291 16931 16931 W LayerDrawable: 	at com.tns.Runtime.callJSMethod(Runtime.java:933)

Runtime Error.. ..Nativescript 2.4.2, Typescript 2.1.4

I installed the plugin, but after build, I tried to run my app and got the following error.

JS ERROR Error: Building UI from XML. @file:///app/views/verify/verify.xml:21:21
	 > Module '/Users/sam/Library/Developer/CoreSimulator/Devices/8FEEE46E-D4AB-41D8-AD5D-7F4AD5F5A412/data/Containers/Bundle/Application/BEA6CB80-A2F8-4999-86A7-4814D12505C4/xxxxx.app/app/nativescript-floatingactionbutton' not found for element 'nativescript-floatingactionbutton:Fab'.
	   > Could not find module '/Users/sam/Library/Developer/CoreSimulator/Devices/8FEEE46E-D4AB-41D8-AD5D-7F4AD5F5A412/data/Containers/Bundle/Application/BEA6CB80-A2F8-4999-86A7-4814D12505C4/xxxxx.app/app/nativescript-floatingactionbutton'. Computed path '/Users/sam/Library/Developer/CoreSimulator/Devices/8FEEE46E-D4AB-41D8-AD5D-7F4AD5F5A412/data/Containers/Bundle/Application/BEA6CB80-A2F8-4999-86A7-4814D12505C4/xxxxx.app/app/nativescript-floatingactionbutton'.

my (Typescript) project uses Nativescript 2.4.2 and Typescript 2.1.4.
Is this plugin supported for typescript projects?
I see angular users doing "registerElement".

Floating Textfield + button bottom of the view

Hi,

I'm working on a chat application in nativescript, i'm unable to display textfield + button bottom of the view. Have tried different layout mechanisms but no luck. If you have any idea how can i display below to the listview. Below is my existing code, its working perfectly in android emulator but text field and button is not visible in actual phone. Thanks in advance.

<GridLayout>
    <GridLayout rows="auto, *, auto, auto" class="nsChatView-view">
        <ListView 
            #messageList
            row="1"
            class="nsChatView-messageList">
            <template let-item="item">
            <GridLayout rows="auto" columns="auto,*,auto"
                [class]="item.isRight ? 'nsChatView-item-right' : 'nsChatView-item-left'">
                    <Image row="0" col="item.isRight ? '2' : '0'"         
                        class="nsChatView-avatar" 
                        verticalAlignment="top"   
                        [src]="item.image"    
                        [visibility]="item.image ? 'visible' : 'collapsed'" ></Image>
                        <StackLayout row="0" col="1" class="nsChatView-message">
                                <Border class="nsChatView-messageArea">
                                    <StackLayout class="nsChatView-content" verticalAlignment="middle" 
                                        [horizontalAlignment]="item.isRight ? 'right' : 'left'">
                                        <Label class="nsChatView-date" [horizontalAlignment]="item.isRight ? 'right' : 'left'" 
                                            [text]="item.date" 
                                            [visibility]="item.date ? 'visible' : 'collapsed'" ></Label>
                                        <Label class="nsChatView-messageText" 
                                            [horizontalAlignment]="item.isRight ? 'right' : 'left'"
                                            [text]="item.message" textWrap="true"></Label>
                                    </StackLayout>
                                </Border>
                        </StackLayout>
                        <Border row="0" [col]="item.isRight ? '0' : '2'" class="nsChatView-separator" ></Border>
                </GridLayout>   
            </template>
        </ListView>
        <AbsoluteLayout row="1" class="nsChatView-sendMessageArea">
            <GridLayout width="99%" height="40" row="1" class="nsChatView-sendMessageArea" columns="*, auto" verticalAlignment="top">
                    <TextField row="0" col="0" #msgTextField  class="nsChatView-messageField" (returnPress)="onSendTap()" [hint]="typeMessageHint"></TextField>
                    <Button row="0" col="1" class="nsChatView-sendMessageButton" (tap)="onSendTap()" text="Send"></Button>
            </GridLayout>
        </AbsoluteLayout>  
    </GridLayout>
     
</GridLayout>

iOS Build Error on Telerik AppBuilder

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

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

Listview not show data after add FAB

Thanks for this package,
But i have problems,

<PullRefresh:PullToRefresh refresh="refreshList">
    <ListView items="{{ SalesIN }}" itemTap="onTap">
        <ListView.itemTemplate>
            <StackLayout>
                <GridLayout rows="auto, auto, auto, auto" columns="10, *, *, *, 10" cssClass="root">
                    <Label row="0" col="0" text=""/>
                    <Label row="0" col="1" colSpan="3" text="{{ outlet }}"
                           style="font-size:16;font-weight:bold;color:#2B81FF;" horizontalAlignment="center"/>
                    <Label row="0" col="4" text=""/>

                    <Label row="1" col="0" text=""/>
                    <Label row="1" col="1" colSpan="2" text="{{ product }}"
                           style="font-size:14;font-weight:bold;" cssClass="details-label"
                           horizontalAlignment="left"/>
                    <Label row="1" col="3" text="{{ expireddate }}" style="font-size:14;font-weight:bold;"
                           cssClass="details-label" horizontalAlignment="right"/>
                    <Label row="1" col="4" text=""/>

                    <Label row="2" col="0" text=""/>
                    <Label row="2" col="1" colSpan="2" text="Tgl Transaksi" style="color:green;"
                           cssClass="details-label" textWrap="true" horizontalAlignment="left"/>
                    <Label row="2" col="3" text="QTY IN" cssClass="details-label" style="color:green;"
                           textWrap="true" horizontalAlignment="right"/>
                    <Label row="2" col="4" text=""/>

                    <Label row="3" col="0" text=""/>
                    <Label row="3" col="1" colSpan="2" text="{{tanggalIn}}" style="color:green;"
                           cssClass="details-label" textWrap="true" horizontalAlignment="left"/>
                    <Label row="3" col="3" text="{{quantity}}" cssClass="details-label" style="color:green;"
                           textWrap="true" horizontalAlignment="right"/>
                    <Label row="3" col="4" text=""/>
                </GridLayout>
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
</PullRefresh:PullToRefresh>
<FAB:fab tap="fabTap"
         row="1"
         icon="ic_menu_add"
         rippleColor="#f1f1f1"
         class="fab-button"/>

Data on listview not show, but if i am remove all work well. Not show error anymore, so any sugestions to check this error ?
Thanks

'hideOnSwipeOfView' does not work for RadListView

Hi,

the FAB plugin works perfekt on a default ListView, but the hideOnSwipeOfView functionality seems not to work for a RadListView from Telerik UI for NativeScript ... or maybe I use it the wrong way?!
I thought putting an ID to the ListView and assigning this ID to the hideOnSwipeOfView property should be enough, it seems to be the right way for a usual ListView at least.

<lv:RadListView
        id="myListView"
     ... >
    <lv:RadListView.itemTemplate>
        ...
    </lv:RadListView.itemTemplate>
</lv:RadListView>
<FAB:fab
     hideOnSwipeOfView="myListView"
     ... 
/>

Best regards

Throws an exception on Android 4.4

FAB on Android 5.1 does not display properly

Tested on AVD and on real devices there is same problem. Here is screenshot with two devices (on the left Android 5.1 and on the right Android 8.0).

Log:

JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode. JS: createNativeView android *** JS: ERROR Error: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference JS: android.graphics.drawable.LayerDrawable$ChildDrawable.<init>(LayerDrawable.java:959) JS: android.graphics.drawable.LayerDrawable$LayerState.<init>(LayerDrawable.java:1007) JS: android.graphics.drawable.RippleDrawable$RippleState.<init>(RippleDrawable.java:922) JS: android.graphics.drawable.RippleDrawable.<init>(RippleDrawable.java:979) JS: android.graphics.drawable.RippleDrawable.<init>(RippleDrawable.java:94) JS: android.graphics.drawable.RippleDrawable$RippleState.newDrawable(RippleDrawable.java:944) JS: com.tns.Runtime.callJSMethodNative(Native Method) JS: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1084) JS: com.tns.Runtime.callJSMethodImpl(Runtime.java:966) JS: com.tns.Runtime.callJSMethod(Runtime.java:953) JS: com.tns.Runtime.callJSMethod(Runtime.java:937) JS: com.tns.Runtime.callJSMethod(Runtime.java:929) JS: com.tns.gen.org.nativescript.widgets.Async_CompleteCallback.onComplete(Async_CompleteCallback.java:12) JS: org.nativescript.widgets.Async$Http$HttpRequestTask.onPostExecute(Async.java:585) JS: org.nativescript.widgets.Async$Http$1$1.run(Async.java:486) JS: android.os.Handler.handleCallback(Handler.java:739) JS: android.os.Handler.dispatchMessage(Handler.java:95) JS: android.os.Looper.loop(Looper.java:135) JS: android.app.ActivityThread.main(ActivityThread.java:5254) JS: java.lang.reflect.Method.invoke(Native Method) JS: java.lang.reflect.Method.invoke(Method.java:372) JS: com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:903) JS: com.android.internal.os.ZygoteInit.main(ZygoteInit.java:698)

Exit from google maps intent using FAB

I am implementing custom turn-by-turn navigation in my NativeScript application. To achieve this, I have started an activity using an android.content.Intent uses android.content.Intent.ACTION_VIEW as action and "google.navigation:q" as Uri string. The google maps navigation page is successfully loaded in my app.
Is there any possibility to place FAB (exit button) or other similar view/widget on top of this new intent?.

Change icon size

Is it possible to change the icon size of the floating button? Let say i wanna have a floating button but it covers all of the circle button. Or is there some kind of work around that I can do?

[iOS] UI Builder Error

Hi,

I am not able to use floatingactionbutton on ios. Everytime I the page with FAB:fab renders i get a segmentation fault. Android works fine.

To be sure the errors isn't between keyboard and chair, I made a new project with your sample code. Android works just fine, iOS output is:

** BUILD SUCCEEDED **

Project successfully built
Successfully deployed on device with identifier 'FFA9A3FA-8F47-4EF0-B8F1-CCAC8B5C2B28'.
Sep  1 18:26:02 Munin backboardd[788]: SecTaskCopyDebugDescription: test[16405]
Sep  1 18:26:02 Munin backboardd[788]: SecTaskCopyDebugDescription: test[16405]
Sep  1 18:26:02 Munin backboardd[788]: SecTaskCopyDebugDescription: test[16405]
Sep  1 18:26:02 Munin backboardd[788]: SecTaskCopyDebugDescription: test[16405]
Sep  1 18:26:02 Munin backboardd[788]: SecTaskLoadEntitlements failed error=22 cs_flags=200, task->pid_self=-1
Sep  1 18:26:02 Munin backboardd[788]: SecTaskCopyDebugDescription: test[16405]
Sep  1 18:26:02 Munin test[16405]: assertion failed: 15G31 13E230: libxpc.dylib + 57882 [66C28065-C9DB-3C8E-926F-5A40210A6D1B]: 0x7d
Sep  1 18:26:02 --- last message repeated 1 time ---
Sep  1 18:26:02 Munin test[16405]: 1   0x109130709 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
Sep  1 18:26:02 Munin test[16405]: 2   0x10979b01e ffi_closure_unix64_inner
Sep  1 18:26:02 Munin test[16405]: 3   0x10979b9d2 ffi_closure_unix64
Sep  1 18:26:02 Munin test[16405]: 4   0x10a37dcd3 -[UIViewController view]
Sep  1 18:26:02 Munin test[16405]: 5   0x10a253fb4 -[UIWindow addRootViewControllerViewIfPossible]
Sep  1 18:26:02 Munin test[16405]: 6   0x10a25469d -[UIWindow _setHidden:forced:]
Sep  1 18:26:02 Munin test[16405]: 7   0x10a266180 -[UIWindow makeKeyAndVisible]
Sep  1 18:26:02 Munin test[16405]: 8   0x10979b82d ffi_call_unix64
Sep  1 18:26:02 Munin test[16405]: 9   0x11cfba250
Sep  1 18:26:02 Munin test[16405]: file:///app/tns_modules/ui/builder/builder.js:162:56: JS ERROR Error: Building UI from XML. @file:///app/main-page.xml:12:13
         ↳Module '/Users/huehnerhose/Library/Developer/CoreSimulator/Devices/FFA9A3FA-8F47-4EF0-B8F1-CCAC8B5C2B28/data/Containers/Bundle/Application/495B675C-5892-4F65-B0F3-C7A19C3A270D/test.app/app/tns_modules/nativescript-floatingactionbutton' not found for element 'nativescript-floatingactionbutton:Fab'.
           ↳Can't find variable: MNFloatingActionButton
Sep  1 18:26:02 Munin com.apple.CoreSimulator.SimDevice.FFA9A3FA-8F47-4EF0-B8F1-CCAC8B5C2B28.launchd_sim[771] (UIKitApplication:org.nativescript.test[0x1d0e][16405]): Service exited due to signal: Segmentation fault: 11

Using: tns version 2.2.1

Fix Fab button layout error

What’s the correct way to combine fab button in a page containing RadSideDrawer? The way I’m doing only a circle appears at the bottom of the page without the add icon and all the RadSideDrawer content is missing and I don’t want the fab to scroll.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
navigatingTo="navigatingTo"
xmlns:nsDrawer="nativescript-pro-ui/sidedrawer"
xmlns:x="nativescript-statusbar"
xmlns:FAB="nativescript-floatingactionbutton" class="page">

<x:StatusBar ios:barStyle="light" barColor="#f56c0a" />

	<ActionBar title="Assistência" class="action-bar myaction-bar">
        <android>
            <NavigationButton icon="res://menu" tap="{{ toggleDrawer }}" />
        </android>
        <ios>
            <ActionItem icon="res://menu" ios.position="left" tap="{{ toggleDrawer}}" />
        </ios>
	</ActionBar>

	<nsDrawer:RadSideDrawer id="sideDrawer" drawerContentSize="150">

		<!-- side drawer content -->
        <ns:RadSideDrawer.drawerContent>
            <StackLayout class="sidedrawer-left sideDrawer">
                <StackLayout class="sidedrawer-content">
                    <!-- <Image src="res://user72" stretch="none" class="user-png"/> -->
                    <Label text="Perfil" padding="10" tap="{{ cadastrar }}" />
                    <Label text="Indicações" padding="10" />
                    <Label text="Pontos" padding="10" />
                    <Label text="Assistência" padding="10" />
                    <Label text="Conta" padding="10" />
                </StackLayout>
            </StackLayout>
        </ns:RadSideDrawer.drawerContent>

        <nsDrawer:RadSideDrawer.mainContent>

            <ScrollView> 
                <StackLayout class="p-16">


                    <Label class="assistence-label" text="...." 
                    horizontalAlignment="center" textWrap="true" />

                    <TextField class="m-t-10 m-b-10 m-l-15 m-r-15" hint="Assunto" text="{{ assunto }}"></TextField>

                    <TextView class="m-t-10 m-b-10 m-l-15 m-r-15" hint="Descrição" text="{{ descrição }}"></TextView>

                    <Button class="btn mybtn" text="Enviar" tap="{{ enviar }}"></Button>
            
                    <Image class="m-t-10 m-b-10 m-l-15 m-r-15" src="res://play50x50" stretch="none" tap="{{ playAudio }}"></Image>
                    
                    <!-- <Button class="btn mybtn" text="Gravar Áudio" tap="{{ start }}" />
                    <Button class="btn mybtn" text="Parar Gravação" tap="{{ stop }}" /> -->
                    <!-- <Button class="btn mybtn" text="Get File" tap="{{ getFile }}" /> -->
                    <!-- <Button class="btn mybtn" text="Ouvir" tap="{{ playAudio }}" /> -->
                    
                    <!-- <Label class="m-t-10 m-b-10 m-l-15 m-r-15" text="{{ recordedAudioFile }}" color="#3489db" textWrap="true" /> -->

                    


                </StackLayout>
            </ScrollView>

            <FAB:fab tap="{{fabTap}}" icon="res://add" rippleColor="#f56c0a" class="fab-button"
             horizontalAlignment="right" /> 


        </nsDrawer:RadSideDrawer.mainContent>

        
           

    </nsDrawer:RadSideDrawer>

</Page>

Please remove this console log

Hi,

Thank you for the awesome plugin, could you please remove this console log :)
https://github.com/bradmartin/nativescript-floatingactionbutton/blob/master/src/fab.android.ts#L27

Angular - hideOnSwipeOfView not working

Hi,

I just tried out your FAB plugin. Setting up the fab worked without problems and it is also showing up correctly in my App - Tab also works.

Where I am struggling is to get the property "hideOnSwipeOfView" to work. I set an id on the ListView element I am using to slide out the fab, but with no luck.

I created a sample with the new NativeScript PlayGround:
https://play.nativescript.org/?template=play-ng&id=xwd7M7&v=2

PS: I just tried it on Android 6+

Maybe I am just missing something, or I missread the documentation?

Thank you for your help

NativeScript Angular2 Support

Will this work with NativeScript + Angular2?
I'm trying to figure out how I would add xmlns:FAB="nativescript-floatingactionbutton" in a NativeScript Angular Page.

Unable to find a specification for `MNFloatingActionButton (~> 0.1.5)`

I use this in native script. When I build project, I found the error which is followed.

[!] Unable to find a specification for MNFloatingActionButton (~> 0.1.5)
Processing node_modules failed. Error: Command pod failed with exit code 1

[Android] Missing click noise

The only way I can get the click noise to work on android is if I add a setTimeout method before calling topmost().navigate:

export function gotoAddConvo(args: EventData) {
    setTimeout(function() {
        topmost().navigate('listpage/listpage')
    }, 100)
}

Any idea why? Just curious 👼

ORIGINAL EXCEPTION: Can't find variable: MNFloatingActionButton

Hi, after updating Nativescript to the latest version, I'm getting the error below when building for IOS. Android not affected.

CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3006:36: ORIGINAL EXCEPTION: Can't find variable: MNFloatingActionButton
CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3009:36: ORIGINAL STACKTRACE:
CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3010:36: FloatingActionButton@file:///app/tns_modules/nativescript-floatingactionbutton/fab.js:20:44
createAndAttach@file:///app/tns_modules/nativescript-angular/view-util.js:96:33
createView@file:///app/tns_modules/nativescript-angular/view-util.js:110:40
createElement@file:///app/tns_modules/nativescript-angular/renderer.js:198:40
createRenderElement@file:///app/tns_modules/@angular/core/bundles/core.umd.js:5450:40
createInternal
create@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9370:52
createEmbeddedView@file:///app/tns_modules/@angular/core/bundles/core.umd.js:7240:24
createEmbeddedView@file:///app/tns_modules/@angular/core/bundles/core.umd.js:4847:57
ngOnInit@file:///app/tns_modules/nativescript-angular/directives/tab-view.js:80:60
detectChangesInInputProps
detectChangesInternal
detectChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9305:39
detectChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9410:52
detectViewChildrenChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9331:36
detectChangesInternal
detectChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9305:39
detectChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9410:52
detectContentChildrenChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9323:36
detectChangesInternal
detectChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9305:39
detectChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9410:52
detectContentChildrenChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9323:36
detectChangesInternal
detectChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9305:39
detectChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9410:52
detectViewChildrenChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9331:36
detectChangesInternal
detectChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9305:39
detectChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9410:52
detectChanges@file:///app/tns_modules/@angular/core/bundles/core.umd.js:7398:37
forEach@[native code]
tick@file:///app/tns_modules/@angular/core/bundles/core.umd.js:6819:49
file:///app/tns_modules/@angular/core/bundles/core.umd.js:6760:113
invoke@file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:190:33
onInvoke@file:///app/tns_modules/@angular/core/bundles/core.umd.js:6206:47
invoke@file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:189:42
run@file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:83:49
next@file:///app/tns_modules/@angular/core/bundles/core.umd.js:6760:88
file:///app/tns_modules/@angular/core/bundles/core.umd.js:5952:60
__tryOrUnsub@file:///app/tns_modules/rxjs/Subscriber.js:223:20
next@file:///app/tns_modules/rxjs/Subscriber.js:172:34
_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/Subject.js:55:29
emit@file:///app/tns_modules/@angular/core/bundles/core.umd.js:5944:84
checkStable@file:///app/tns_modules/@angular/core/bundles/core.umd.js:6174:48
setHasMicrotask@file:///app/tns_modules/@angular/core/bundles/core.umd.js:6245:29
onHasTask@file:///app/tns_modules/@angular/core/bundles/core.umd.js:6218:50
hasTask@file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:249:64
_updateTaskCount@file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:266:33
invokeTask@file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:227:42
runTask@file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:123:57
drainMicroTaskQueue@file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:355:42
promiseReactionJob@[native code]
UIApplicationMain@[native code]
start@file:///app/tns_modules/application/application.js:251:30
bootstrapApp@file:///app/tns_modules/nativescript-angular/platform.js:60:26
bootstrapModule@file:///app/tns_modules/nativescript-angular/platform.js:53:26
anonymous@file:///app/main.js:5:57
evaluate@[native code]
moduleEvaluation@[native code]
[native code]
promiseReactionJob@[native code]
CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3013:36: ERROR CONTEXT:

Expose hide() and show() methods

Currently the only way to hide or show the FAB is to call animate() on it. It works, but it is cumbersome because it won't follow swipeAnimation/hideAnimationDuration.

I suggest to move the on("pan") callback code to methods such as hide() and show() because sometimes it is desirable to control this manually.

Thank you

Problem using with RadListView

First of all, thank you very much for the plugin !!

After installing the plugin in an app that use the RadListView component (nativescript-telerik-ui) seems to insert a page break after each item in the RadListView even if you don't use the floating action button in this page.

If you uninstall the plugin, the RadListView looks well again.

Perhaps the problem is in the RadListView plugin and not here ...

Before installing the plugin:

After installing the plugin:

Thanks a lot in advance!!

Element for FAB already registered

Nativescript + Angular:

What is the best place to register FAB?

registerElement("Fab", () => require("nativescript-floatingactionbutton").Fab);

in AppModule, AppComponent, ChildComponents gives an error "Element for FAB already registered".

Support background-color css on android

👍

Error hideOnSwipeOfView and background-color !!!

It looks like i have problem with this atttribute "hideOnSwipeOfView" in nativescript 3.2.1,,, hmm -_-
And i have problem too when i change background-color in android version <= 5.0

iOS fab Not Visible?

I'm using NS2.5 and here's the code below this is working fine in android -

 <StackLayout>
<SearchBar class="searchBar" textFieldHintColor="#DEDEDE"  (clear)="onClear()" (loaded)="sBLoaded($event)"  id="searchPackages" #sb hint="Search by Package Name" [(ngModel)]="searchPhrase"(ngModelChange)="onChangePackages($event)"></SearchBar>
<Label [text]='total' textWrap="true" class="countLabel"></Label>
<GridLayout style="margin-top:5px" rows="*" columns="*">
    <FAB (tap)="fabTap()" row="0" col="0" icon="res://itisfab" rippleColor="#f1f1f1" class="fab-button" hideOnSwipeOfView="list-style" swipeAnimation="slideDown"></FAB>
     <PullToRefresh (refresh)="refreshList($event)">
    <ListView row="0" col="0" [items]="packagesList" class="small-spacing" (loadMoreItems)="listViewLoadMoreItems()">
        <template let-item="item">
            <GridLayout columns=" *,*,3*,4*" rows="*, *" (tap)="viewPackage(item.id)" style="padding: 10;">            
                <Label [text]="item.name"  textWrap="true" row ="0" col = "0" colspan ="3" class = "listTitle"></Label>
                <label text="SESSION"  *ngIf="item.packageType == 'sessions'" class="sessionType" row="1" col="0" colspan="2"></label>
                <label text="BATCH"  *ngIf="item.packageType == 'batch' " class="batchType" row="1" col="0" colspan="2"></label>
                <label text="DURATION"  *ngIf="item.packageType == 'duration' " class="durationType" row="1" col="0" colspan="2"></label>                   
                <Label row="0" col="3" class="font-awesome redLabel" text="&#xf156; {{item.minValue | number:'.0-0'}}"></Label>
                <Label row="1" col="3" class="SourceSansPro-Semibold" text="Onwards" >

                    </Label>
            </GridLayout>
        </template>
    </ListView>
     </PullToRefresh>
</GridLayout>

[iOS] FAB is invisible

I'm testing my app, built with Typescript and Angular 2, on ios emulator and while on Android everything works fine, on iOS the FAB dowsn't show up. The code is the same for both platforms:

<Fab row="1" class="fab-button"
    (tap)="showAddContactModal()"
    icon="res://ic_add_white_48dp"
    rippleColor="#f1f1f1"
    verticalAlignment="bottom"
    horizontalAlignment="right"
    hideOnSwipeOfView="contactsList">
</Fab>

What is the problem?

Update for 3.0 breaking changes - [nativescript 3.0] ui/core/proxy missing

The upcoming release of nativescript has remove the ui/core/proxy module. Will the plugin be compatible with 3.0? any estimates on when that could happen?

thank you very much in advanced.

Checking on renaming the npm package

We might need to rename the package to nativescript-fab

When the package is nativescript-floatingactionbutton I receive an error: ''Failed to find module with absolute path:..."

Open issue: NativeScript/NativeScript#1423 will see what the team says and go from there.

In the meantime, if anyone has issues just rename the folder once you npm install and then change the path in the XML namespace include line. I'm using the following:

  xmlns:FAB="nativescript-fab/fab"

In nativescript version 3.1.1 can't change background-color!!!

In nativescript version 3.1.1 can't change background-color!!!
Error : java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable ...bla...bla...bla...

Error when navigating to the page contains FAB NativeScript 3.x.x

Hi,
After I update my project to NS 3 I faced a crush when I navigate to the page contains FAB on ios
what I did :
tns create test-fab --template typescript
tns platform add ios
tns plugin add nativescript-floatingactionbutton
tns run ios (on emulator)

then I get this crush error:

file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:195:56: JS ERROR Error: Building UI from XML. @file:///app/main-page.xml:12:13
> Module '/Users/codeobia/Library/Developer/CoreSimulator/Devices/2792A572-93F5-493C-BCE2-C2DCEB7AC2F1/data/Containers/Bundle/Application/E5FC442D-A3E8-4FAD-8198-5D24528F34C3/testfab.app/app/tns_modules/nativescript-floatingactionbutton' not found for element 'nativescript-floatingactionbutton:Fab'.
> Can't find variable: MNFloatingActionButtonJul 16 09:14:22 Codes-MacBook-Pro com.apple.CoreSimulator.SimDevice.2792A572-93F5-493C-BCE2-C2DCEB7AC2F1.launchd_sim[21552] (UIKitApplication:org.nativescript.testfab[0xd57e][21574][29510]): Service exited due to Segmentation fault: 11
9:14:23 AM - Compilation complete. Watching for file changes.

Any help ?

Not showing on devices with API level < 21?

FAB button is not visible on devices having api level less than 21. Is ther any workaround to resolve this.?

issues with newest version of angular

System.err: com.tns.NativeScriptException:
System.err: Calling js method onCreateView failed
System.err:
System.err: Error: android.content.res.Resources$NotFoundException: Resource ID #0x0
System.err:     android.content.res.ResourcesImpl.getValue(ResourcesImpl.java:190)
System.err:     android.content.res.Resources.getDrawable(Resources.java:770)
System.err:     android.content.res.Resources.getDrawable(Resources.java:742)
System.err:     com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
System.err:     com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:957)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:941)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:933)
System.err:     com.tns.FragmentClass.onCreateView(FragmentClass.java:40)
System.err:     android.app.Fragment.performCreateView(Fragment.java:2353)
System.err:     android.app.FragmentManagerImpl.moveToState(FragmentManager.java:995)
System.err:     android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1171)
System.err:     android.app.BackStackRecord.run(BackStackRecord.java:816)
System.err:     android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1578)
System.err:     android.app.FragmentManagerImpl$1.run(FragmentManager.java:483)
System.err:     android.os.Handler.handleCallback(Handler.java:751)
System.err:     android.os.Handler.dispatchMessage(Handler.java:95)
System.err:     android.os.Looper.loop(Looper.java:154)
System.err:     android.app.ActivityThread.main(ActivityThread.java:6119)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
System.err: File: "file:///data/data/org.nativescript.KipoTrac/files/app/tns_modules/nativescript-floatingactionbutton/fab.js, line: 81, column: 17
System.err:

No + sign

I get floating action button but I don't see + sing in floating action button.
Thanks!

runtime error

Hi Brad, this widget is great !!!

I'm trying to use floatingactionbutton, but I have a error in runtime.

I made

npm install nativescript-floatingactionbutton
Insert XML and CSS code like your example
tns run android

tns --version: 1.5.2

Error trace:

com.tns.NativeScriptException:
Calling js method onClick failed

Error: Building UI from XML. @file:///app/componentes/entrega/cumplidoImg.xml:17:12
��Module '/data/data/org.nativescript.logiApp/files/app/tns_modules/nativescript-floatingactionbutton' not found for element 'nativescript-floatingactionbutton:Fab'.
��
Error calling module function

TypeError: style.StylePropertyChangedHandler is not a function
File: "/data/data/org.nativescript.logiApp/files/app/tns_modules/nativescript-floatingactionbutton/fab.js, line: 77, column: 61

StackTrace:
Frame: function:'FloatingActionButtonStyler.registerHandlers', file:'/data/data/org.nativescript.logiApp/files/app/tns_modules/nativescript-floatingactionbutton/fab.js', line: 77, column: 62
Frame: function:'', file:'/data/data/org.nativescript.logiApp/files/app/tns_modules/nativescript-floatingactionbutton/fab.js', line: 83, column: 28
Frame: function:'require', file:'', line: 1, column: 120

Frame: function:'getComponentModule', file:'/data/data/org.

nstudio / nativescript-floatingactionbutton Goto Github PK

nativescript-floatingactionbutton's Introduction

NativeScript-FloatingActionButton

NativeScript plugin for Material Design Floating Action Button UI component.

Installation

Nativescript 7+:

NativeScript lower than 7:

Screenshot

Multiple FAB/Swipe Animation Support

Usage

The icon for the FAB can be a local image in your app or an image/icon from the App_Resources.

Plain NativeScript

NativeScript Angular

HTML

NativeScript Vue

Template

CSS

Use Icon Fonts

API

iOS Notes

Running Demo Apps

Contributors

nativescript-floatingactionbutton's People

Contributors

Stargazers

Watchers

Forkers

nativescript-floatingactionbutton's Issues

Error trace:

Frame: function:'getComponentModule', file:'/data/data/org.

Recommend Projects

Recommend Topics

Recommend Org