NativeScript Material Bottom sheet

Material Design's Bottom sheet component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue

Installation

For NativeScript 7.0+

• tns plugin add @nativescript-community/ui-material-bottomsheet

For NativeScript 6.x

• tns plugin add nativescript-material-bottomsheet

If using tns-core-modules

• tns plugin add [email protected]

Be sure to run a new build after adding plugins to avoid any issues.

Changelog

FAQ

API

export interface BottomSheetOptions {
    view: string | ViewBase; 
    // View instance to be shown in bottom sheet. Or the name of the module to load starting from the application root.
    context?: any; 
    // Any context you want to pass to the view shown in bottom sheet. This same context will be available in the arguments of the shownInBottomSheet event handler.
    animated?: boolean; 
    // An optional parameter specifying whether to show the sheet view with animation.
    dismissOnBackgroundTap?: boolean; 
    // An optional parameter specifying whether to dismiss the sheet when clicking on background.
    dismissOnDraggingDownSheet?: boolean; 
    // An optional parameter specifying whether to disable dragging the sheet to dismiss.
    dismissOnBackButton?: boolean; 
    // An optional parameter that specifies whether to close the sheet when pressing the back button.
    closeCallback?: Function; 
    //  A function that will be called when the view is closed. Any arguments provided when calling shownInBottomSheet.closeCallback will be available here.
    trackingScrollView?: string; 
    // optional id of the scroll view to track
    transparent?: boolean; 
    // optional parameter to make the bottomsheet transparent
    ignoreTopSafeArea?: boolean; 
    // optional ios parameter to top safe area. Default is true
    ignoreBottomSafeArea?: boolean; 
    // optional ios parameter to bottom safe area. Default is false
    disableDimBackground?: boolean; 
    // optional parameter to remove the dim background
    skipCollapsedState?: boolean; 
    // optional Android parameter to skip midway state when view is greater than 50%. Default is false
    peekHeight?: number; 
    // optional parameter to set the collapsed sheet height. To work on iOS you need to set trackingScrollView. Also ensure the scrollView is taking the full height of the bottomsheet content. Otherwise the "full" height wont be computed correctly
    ignoreKeyboardHeight?: boolean; 
    //(iOS only) A Boolean value that controls whether the height of the keyboard should affect the bottom sheet's frame when the keyboard shows on the screen. (Default: true)
    onChangeState?: onChangeStateBottomSheet; 
    // One works to be called on the scroll of the sheet. Parameters: state (CLOSED, DRAGGING, DRAGGING, COLLAPSED) and slideOffset is the new offset of this bottom sheet within [-1,1] range. Offset increases as this bottom sheet is moving upward. From 0 to 1 the sheet is between collapsed and expanded states and from -1 to 0 it is between hidden and collapsed states.
    canTouchBehind?: boolean //(Android only) allows to interact with the screen behind the sheet. For it to work properly need dismissOnBackgroundTap set to true.
}

Usage

Plain NativeScript

We need to do some wiring when your app starts, so open app.js and add this before creating any View/App/Frame:

JavaScript

var material = require("@nativescript-community/ui-material-bottomsheet");

material.install();

TypeScript

import { install } from "@nativescript-community/ui-material-bottomsheet";
install();

Uses the same kind of API as NativeScript Modals.

TS

const modalViewModulets = "ns-ui-category/modal-view/basics/modal-ts-view-page";
export function openBottomSheet(args) {
    const mainView: Button = <Button>args.object;
    const context = { username: "test_username", password: "test" };
    const fullscreen = true;
    mainView.showBottomSheet({
        view: modalViewModulets,
        context,
        closeCallback: (username, password) => {
            bottom-sheet
            alert(`Username: ${username} : Password: ${password}`);
        },
        fullscreen
    });
}

NativeScript + Vue 2

import Vue from 'nativescript-vue';
import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
import { install } from "@nativescript-community/ui-material-bottomsheet";
install();

Vue.use(BottomSheetPlugin);

Then you can show a Vue component:

import MyComponent from 'MyComponent.vue';

//inside another Vue component
const options: VueBottomSheetOptions = {
    // props to be passed to MyComponent
    props: {
        someProp: true,
        anotherProp: false
    },
    // listeners to be connected to MyComponent
    on: {
        someEvent: (value) => { console.log(value) }
    }
};
this.$showBottomSheet(MyComponent, options)

NativeScript + Vue 3

import { createApp } from 'nativescript-vue';
import { BottomSheetPlugin } from '@nativescript-community/ui-material-bottomsheet/vue3';
import { install } from "@nativescript-community/ui-material-bottomsheet";
install();

const app = createApp(...);
app.use(BottomSheetPlugin);

Then you can show a Vue component:

import { useBottomSheet } from "@nativescript-community/ui-material-bottomsheet/vue3";
import MyComponent from 'MyComponent.vue';


const options: VueBottomSheetOptions = {
    // props to be passed to MyComponent
    props: {
        someProp: true,
        anotherProp: false
    },
    // listeners to be connected to MyComponent
    on: {
        someEvent: (value) => { console.log(value) }
    }
};

const { showBottomSheet, closeBottomSheet } = useBottomSheet()

showBottomSheet(MyComponent, options);
closeBottomSheet();

NativeScript + Angular

First you need to include the NativeScriptMaterialBottomSheetModule in your app.module.ts

import { NativeScriptMaterialBottomSheetModule} from "@nativescript-community/ui-material-bottomsheet/angular";

@NgModule({
    imports: [
        // This will call the install method and inject a global service called BottomSheetService
        NativeScriptMaterialBottomSheetModule.forRoot()
    ],
    ...
})

now you can show your custom BottomSheet using the BottomSheetService, this service follows the same implementation as the ModalService

ItemComponent

import { Component,  ViewContainerRef } from '@angular/core';
import { BottomSheetOptions, BottomSheetService } from '@nativescript-community/ui-material-bottomsheet/angular';
import { ShareOptionsComponent } from './share-options.component';

@Component({
    selector: 'ns-item',
    templateUrl: './item.component.html',
    moduleId: module.id
})
export class ItemComponent {
    constructor(
        private bottomSheet: BottomSheetService, 
        private containerRef: ViewContainerRef,
    ) {}

    showOptions() {
        const options: BottomSheetOptions = {
            viewContainerRef: this.containerRef,
            context: ['Facebook', 'Google', 'Twitter']
        };

        this.bottomSheet.show(ShareOptionsComponent, options).subscribe(result => {
            console.log('Option selected:', result);
        });
    }
}

ShareOptionsComponent

<ListView
    [items]="options"
    (itemTap)="onTap($event)"
    separatorColor="white"
    class="list-group"
    height="200"
>
    <ng-template let-option="item">
        <Label
            class="list-group-item"
            [text]="option"
        ></Label>
    </ng-template>
</ListView>

import { Component, OnInit } from '@angular/core';
import { BottomSheetParams } from '@nativescript-community/ui-material-bottomsheet/angular';
import { ItemEventData } from '@nativescript/core/ui/list-view';

@Component({
    selector: 'ns-share-options',
    templateUrl: 'share-options.component.html'
})
export class ShareOptionsComponent implements OnInit {
    options: string[];
    
    // The BottomSheetService injects the BottomSheetParams to the component
    // so you can get the context and call the closeCallback method from the component displayed in your BottomSheet
    constructor(private params: BottomSheetParams) {}

    ngOnInit() {
        this.options = this.params.context;
    }

    onTap({ index }: ItemEventData) {
        this.params.closeCallback(this.options[index]);
    }
}