Nativescript Custom Bottomsheet

Overview

Nativescript Custom Bottomsheet is a plugin that enable the show a custom beautiful actionsheet/bottomsheet.

Installation

tns plugin add nativescript-custom-bottomsheet

Usage

TypeScript

xml

...
    <StackLayout class="p-20">
        <Button text="show" class="t-20 text-center c-black" tap="{{ onTap }}"/>
    </StackLayout>
...

main-view-model.ts

import { Observable } from 'tns-core-modules/data/observable';
import { CustomBottomsheet, CBSheetOption } from 'nativescript-custom-bottomsheet';

export class HelloWorldModel extends Observable {
  private customBottomsheet: CustomBottomsheet;

  constructor() {
    super();
    this.customBottomsheet = new CustomBottomsheet();
  }

  public onTap(): void {
    const options: CBSheetOption = {
      icon: 'contact',
      title: 'John Doe',
      items: [{
        icon: 'call',
        title: 'Make a call'
      },
      {
        icon: 'sms',
        title: 'Send a text message'
      },
      {
        icon: 'email',
        title: 'Send an email'
      },
      {
        icon: 'comments',
        title: 'Leave a comment'
      },
      {
        icon: 'delete',
        title: 'Delete contact'
      }
      ],
      onItemTap: (index, item) => {
        console.log('index', index);
      },
      cancelButtonText: 'Cancel'
    };

    this.customBottomsheet.show(options);
  }
}

Angular

your.component.html

<GridLayout class="page">
    <StackLayout class="p-20">
        <Button text="show" class="t-20 text-center c-black" (tap)="onTap()"></Button>
    </StackLayout>
</GridLayout>

your.component.ts

import { Component, OnInit } from "@angular/core";
import { OnTabSelectedEventData, BubbleNavigationItem } from 'nativescript-custom-bottomsheet';

@Component({
    ...
})
export class YourComponent implements OnInit {
    private customBottomsheet: CustomBottomsheet;

    constructor() {
        this.customBottomsheet = new CustomBottomsheet();
    }

    ngOnInit(): void {
        ...
    } 
    
    public onTap(): void {
        const options: CBSheetOption = {
            icon: 'contact',
            title: 'John Doe',
            items: [{
                icon: 'call',
                title: 'Make a call'
            },
            {
                icon: 'sms',
                title: 'Send a text message'
            },
            {
                icon: 'email',
                title: 'Send an email'
            },
            {
                icon: 'comments',
                title: 'Leave a comment'
            },
            {
                icon: 'delete',
                title: 'Delete contact'
            }
            ],
            onItemTap: (index, item) => {
                console.log('index', index);
            }
            cancelButtonText: 'Cancel'
        };

        this.customBottomsheet.show(options);
    }
}

Vue

app.js

your-component.vue

<template>
  <Page class="page">
    ...

    <GridLayout>
      <StackLayout class="p-20">
        <Button text="show" class="t-20 text-center c-black" @tap="onTap"></Button>
      </StackLayout>
    </GridLayout>
  </Page>
</template>

<script>
import {
  CustomBottomsheet
} from "nativescript-custom-bottomsheet";

const customBottomsheet = new CustomBottomsheet();

export default {
  methods: {
    onTap() {
      const options = {
        icon: "contact",
        title: "John Doe",
        items: [
          {
            icon: "call",
            title: "Make a call"
          },
          {
            icon: "sms",
            title: "Send a text message"
          },
          {
            icon: "email",
            title: "Send an email"
          },
          {
            icon: "comments",
            title: "Leave a comment"
          },
          {
            icon: "delete",
            title: "Delete contact"
          }
        ],
        onItemTap: (index, item) => {
          console.log("index", index);
        },
        cancelButtonText: 'Cancel'
      };

      this.customBottomsheet.show(options);
    }
  }
};
</script>

API

CustomBottomsheet

Methods

Property	Type	Description	Platforms
show(options: CBSheetOption)	Void	Show Bottomsheet

CBSheetOption

Properties

Property	Type	Description	Platforms
icon	string	Set Bottomsheet header icon
title	string	Set Bottomsheet header title
items	Array<CBSheetItem>	Set Bottomsheet item's icon and title
onItemTap	Callback Function	Call when an item is clicked and pass the index of the clicked item and it's properties e.g. icon and title
cancelButtonText	string	Set the cancel button text on iOS

CBSheetItem

Properties

Property	Type	Description	Platforms
icon	string	Set Bottomsheet item icon
title	string	Set Bottomsheet item title

Limitations

iOS

Currently on ios adding more than four tabs will ressort having your text animations cut.

Author

Jonathan Mayunga, mayunga.j@gmail.com

Credits

• For iOS LCActionSheet by Leo iTofu.

License

Apache License Version 2.0, January 2004