NativeScript Floating Button

Question

I just recently started with NativeScript and ran into a roadblock.

I have a AppBuilder/NativeScript project (iOS only for now) in which I want to implement a floating action button. I have seen plenty of examples where the FAB is positioned above a ListView however my scenario is different:

• I have 3 repeaters (displaying unrelated data).
• each repeater may or may not be visible on the page (if there is no data to display, I am hiding it)
• I would like to place the FAB on the bottom right regardless of what the content is
• The whole page is wrapped in a ScrollView

I tried using nativescript-floatingactionbutton, but I cannot compile with this module installed. I keep getting "Cannot build project because module nativescript-floatingactionbutton contains insecure code. Remove the module and try again."

I also tried an AbsoluteLayout on the page level, but it seems that the layout overlays the rest of the page and I cannot even see the content, just the FAB.

Here is the markup

<Page id="MainPage" xmlns="http://schema.nativescript.org/tns.xsd" actionBarHidden="true" loaded="pageLoaded" xmlns:drawer="nativescript-telerik-ui/sidedrawer" xmlns:sharedDrawers="widgets/drawers">

  <drawer:RadSideDrawer id="mainDrawer">

    <drawer:RadSideDrawer.mainContent>
      <ScrollView id="wrapper" opacity="0">
          <DockLayout stretchLastChild="false">
            <GridLayout id="mainHeader" cssClass="header" dock="top" columns="50, *, 50">
              <Label class="icomoon-icon" text="&#xe6d0;" row="0" col="0" horizontalAlignment="center" tap="openDrawer" fontSize="18" />
              <Label horizontalAlignment="center" text="{{ pageTitle }}" row="0" col="1" />
              <Label class="icomoon-icon" text="&#xe610;" row="0" col="2" horizontalAlignment="center" tap="notifications" fontSize="18" />
            </GridLayout>

            <GridLayout cssClass="main" rows="auto, *" >
              <StackLayout row="0">
                <StackLayout  cssClass="{{arr.length ? '' : 'hidden' }}">
                  <label cssClass="section-title" text="{{strings.activeLoans}}"></label>
                  <Repeater items="{{ arr }}" >
                    <Repeater.itemTemplate cssClass="item">
                      ...
                    </Repeater.itemTemplate>
                  </Repeater>
                </StackLayout>

                <StackLayout cssClass="{{arr2.length ? '' : 'hidden' }}">
                  <label cssClass="section-title" text="{{strings.history}}" marginTop="20" />

                  <Repeater items="{{ arr2 }}">
                    <Repeater.itemTemplate>
                      ...
                    </Repeater.itemTemplate>
                  </Repeater>
                </StackLayout>

                <StackLayout cssClass="{{arr3.length ? '' : 'hidden' }}">
                  <label cssClass="section-title" text="{{strings.data}}" marginTop="20" />
                  <Image src="~/images/pic.jpg" />

                  <Repeater items="{{ arr3 }}">
                    <Repeater.itemTemplate>
                      ...
                    </Repeater.itemTemplate>
                  </Repeater>
                </StackLayout>
              </StackLayout>
            </GridLayout>
          </DockLayout>
        
      </ScrollView>
    </drawer:RadSideDrawer.mainContent>

    <drawer:SideDrawer.drawerContent>
      <sharedDrawers:mainDrawer />
    </drawer:SideDrawer.drawerContent>
  </drawer:RadSideDrawer>

  <!--<AbsoluteLayout cssClass="fabContainer">
    <Image src="res://fab_add" tap="newLoan" cssClass="fab" />
  </AbsoluteLayout>-->
</Page>

I have truncated and changed some of the non-relevant code.

Any help is greatly appreciated.

Thank you.

Answer 1

Аs Brad Martin says, the plugin cannot be built inside Telerik Platform as not all of its maintainers are white listed. To be more precise, when an iOS build of a plugin containing a pod file is initiated in Telerik Platform, the service checks its maintainers. As a pod file can contain post build scripts, Telerik Platform is currently flagging plugins as safe by keeping a list of white listed maintainers.

This plugin has 5 maintainers - Brad Martin being only one of them. Brad’s email is white listed but ‘gabrielbiga’ and ‘lazaromenezes’ are not yet whitelisted. @Brad Martin- can you please let us know whether we should whitelist these users emails as well? The other approach would be to replace the pod file with frameworks instead.

One last thing, moving forward with Telerik Platform releases Telerik Platform team will be working on improving the support for plugins containing pods. They will probably remove the "whitelisting” approach with sandboxing instead but we couldn’t yet comment on any specifics.