triniwiz / nativescript-popup

Installation

tns plugin add nativescript-popup

Screenshots

Usage

    <Button tap="openPopup"/>

    import { Popup } from 'nativescript-popup';

    function openPopup(args){
    const popup = new Popup({
        backgroundColor:'white' | '#fff',
        height:100,
        width:100,
        unit:'dp' | 'px' | '%',
        elevation:10, // android only
        borderRadius:25, // android only
        outsideTouchble: true,
    });
    const view = new Label();
    view.text = "Test";

    /* IOS */
    const nativeView = UILabel.new();
    nativeView.text = "Native Button";
    nativeView.frame = CGRectMake(0,0,50,50);
    /* -- IOS */

    /* Android */
    const nativeView = new new android.widget.TextView(context);
    nativeView.setText("Native Button");
    nativeView.setWidth(50);
    nativeView.setHeight(50);
    /* -- Android */

    popup.showPopup(anchor: View | nativeView , view: View | nativeView);
    }

API

Constructor

Popup(options: PopupOptions)

Constructor Example

import { Popup, PopupOptions } from "nativescript-popup";

const opts: PopupOptions = {
  backgroundColor: "white" | "#fff",
  height: 100,
  width: 100,
  unit: "dp" | "px" | "%",
  elevation: 10, // android only
  borderRadius: 25 // android only
};

const popup = new Popup(opts);

Popup Methods

Method	Description
showPopup(source: any, view: any): Promise	Shows the popup anchored to the source argument with the view argument as the popup contents. The view argument can be a native Android/iOS view, a NativeScript View, or a string path to a template within the app directory.
hidePopup(data?: any): Promise	Hides the popup and removes it from the view hierarchy.

License

Apache License Version 2.0, January 2004

nativescript-popup's Issues

This plugin isn't supported for android?

Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

• iOS/Android/Both
• iOS/Android versions
• emulator or device. What type of device?

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

• CLI: (run tns --version to fetch it)
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)

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

Describe the steps to reproduce it.

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

How to set position of popup.

Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

• iOS/Android/Both
• iOS/Android versions
• emulator or device. What type of device?

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

• CLI: (run tns --version to fetch it)
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)

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

Describe the steps to reproduce it.

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

Problem with navigateByUrl in Angular

Hi,

Thanks for the excellent plugin. I was trying it in my Angular project with NativeScript 4.0.0. Everything was working great except when I was trying to navigate to another page from tap event of the listed item, that time I am getting only white page.

private _showPopup(source, view) {
        this.popup = new Popup({
            height: 50,
            width: 40,
            unit: '%',
            elevation: 10,
            borderRadius: 25
        });
        this.popup.showPopup(source, view).then(data => {
            //console.log(data);
        });
    }
    private hidePopup(index?) {
        let t = this;
        this.popup.hidePopup(index)
    }
public openPopUp() {
        let t = this;
        const stack: StackLayout = new StackLayout();
        stack.paddingTop = 30;
        stack.paddingLeft = 30;
        stack.height = "auto";

const lbl4: Label = new Label();
        lbl4.text = 'Profile';
        lbl4.marginBottom = 5;
        lbl4.marginLeft = 8;
        lbl4.height = 40;
        lbl4.on("tap", function () {
            t.routerExt.navigateByUrl("/login");

        })
        stack.addChild(lbl4);

        const sv = new ScrollView();
        sv.content = stack;
        this._showPopup(this.page.getViewById('profile'), sv);
}

Any hints in where I am doing mistake?

Thanks

Info request

Dear @triniwiz ,

How can I programmatically open the OS native "share" popup? That is, the one that shows when you highlight any text field (on a broswer page, for example) and tap on "share" (iOS and Android have the same behaviour).

Thank you

Slow/Lag issue

I use this ini nativescript 6.2 and performance is slow / lag. Please make FPS 60

Arrow is not showing for android

I am using this code for popover functionality but the popover arrow is not displaying whether I set hideArrow to true or false.

new Popup({ backgroundColor: 'transparent', width: 70, height: 50, unit: '%', elevation: 10, hideArrow: false // or true })

popOver arrow backgroundcolor not changing

In iOS after setting the options>> background color , only the frames background color get changed.The arrow button remains as same.After editing the popup.js with "popoverPresentationController.backgroundColor" this code the arrow color changed.Please review and make the necessary changes

nativescript-popup for Nativescript-Vue

I like this concept, I hope support nativescript-vue next

Items do not display in angular demo app when event binding is used

For example, you can edit the template "bomb.html" and add a (tap) event binding to the label

With the (tap) event binding added, the label will not display.

<Label text="NativeScript is the bomb.com" color="#ff4801" fontSize="22" textWrap="true" (tap)="someMethod()">

I'm using an android emulator. Pixel 2 API 27. Android 8.1

Using template path as source.

Tested only on Android emulator, tns version 3.4.1. Getting the following error when passing a template path as source.

JS: ERROR Error: Uncaught (in promise): Error: Expecting a valid View instance.
JS: Error: Expecting a valid View instance.
JS: at StackLayout.ViewBase._addView (file:///data/data/com.m.myapp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:337:19) [angular]

Unexpected ':' token

I'm trying to run the .ts code given in the Usage section but it keeps throwing the Unexpected ':' token error near popup.showPopup( View | nativeView , view : View | nativeView);

Any ideas how to fix this?

Deprecated topmost()

JS: topmost() is deprecated. Use Frame.topmost() instead.

Opening modal after closing popup loads blank

I'm wanting to use the popup to list some actions, some of which will open content in a modal once selected. However when I try this the modal (which works fine if opened using an ActionItem) loads completely blank.

I've added settimeout as I was getting an error of

ViewHierarchy: Parent is already presenting view controller. Close the current modal page before showing another one!

I suspect popover is somehow breaking standard modals but not sure why.

Doesn't work

<ActionBar [title]="project?.title" class="action-bar">
  <ActionItem ios.position="right" (tap)="showMenu()"><Label id="menu" text="Options"></Label></ActionItem>
</ActionBar>

showMenu() {
    const stack: any = new StackLayout();
    stack.height = '100%';
    const menulbl: any = new Label();
    menulbl.text = 'Edit';
    menulbl.height = 40;
    menulbl.paddingLeft = 10;
    menulbl.on('tap', args => {
      this.popup.hidePopup();
      setTimeout(() => {
        this.editProject(); // This opens a blank modal
      }, 500);
    });
    stack.addChild(menulbl);
    const stackhr: any = new StackLayout();
    stackhr.class = 'hr-light';
    stack.addChild(stackhr);
    const sv = new ScrollView();
    sv.content = stack;
    this._showMenu(this.page.getViewById('menu'), sv);
  }

Does work

<ActionBar [title]="project?.title" class="action-bar">
  <ActionItem ios.position="right" ios.systemIcon="2" (tap)="editProject()"></ActionItem>
</ActionBar>

ActionBar ActionItem

Which platform(s) does your issue occur on?

• iOS
• emulator

For some reason it doesn't seem possible to have the popup attached to an ActionItem like below

<ActionBar title="Projects" class="action-bar">
  <StackLayout orientation="horizontal" ios:horizontalAlignment="center" android:horizontalAlignment="left">
    <Image src="res://logo" height="32"></Image>
  </StackLayout>
  <ActionItem id="menu" text="Options" ios.position="right" (tap)="showMenu()"></ActionItem>
</ActionBar>

However it seems like you can put a Label inside an ActionItem with an id and that will work.

<ActionBar title="Projects" class="action-bar">
  <StackLayout orientation="horizontal" ios:horizontalAlignment="center" android:horizontalAlignment="left">
    <Image src="res://logo" height="32"></Image>
  </StackLayout>
  <ActionItem ios.position="right" (tap)="showMenu()"><Label id="menu" text="Options"></Label></ActionItem>
</ActionBar>

Not sure if this is a bug or not, but at least this will help anyone else that comes across this problem.

Shadow in Android using setElevation

I have tried to add shadow to Android part by using setElevation() which should provide shadowing for the Popwindow if the background is set and API >=21, but sill have no luck with that.
when I tried

this._popup.setElevation(10);

it says that setElevation is not a property, and when I try to do it to the view

view.android.setElevation(10);

nothing happens

TextField not receiving text

Make sure to check the demo app(s) for sample usage

Ok

Make sure to check the existing issues in this repository

Ok

Which platform(s) does your issue occur on?

• iOS/Android versions
• emulator

I would like to know if this plugin supports using the TextField. If so, Why is it not working?
I don't get any errors when running the app.

Thank you very much for the help.