Search code examples
nativescriptangular2-nativescript

ActionBar isn't showing on NativeScript Angular 2 modal


I'm attempting to open a modal (component with view) and want it to have a close button on the action bar on the top.

Is there anything i'm missing on my modal page view for the actionbar not to be showing up? I'm not sure if it's being covered or not? I also have the options being passed to the modal as "fullscreen:true"

Here's the view markup

<StackLayout>

<ActionBar title="Add a new beer">

    <ActionItem 
        (tap)="close('OK')"
        text="Close"
        ios.position="left"
        android.position="left">
    </ActionItem>

</ActionBar>

// Beer name
<Label class="beer_information_label" text="What's the name of the beer?"></Label>
<TextField hint="Enter the beer's name'" [(ngModel)]="beer.name" autocorrect="false" text="" autocapitalizationType="words" row="2" col="1"></TextField>

// Label image
<Label class="beer_information_label" text="Label image"></Label>

// Beer Type
<Label class="beer_information_label" text="Beer type"></Label>
<TextField  hint="Beer type" autocorrect="true" text="" autocapitalizationType="words" row="2" col="1"></TextField>

// Beer Rating
<Label class="beer_information_label" text="Rating"></Label>
<Button class="btn btn-primary btn-active" text="Set Beer Rating" (tap)="setBeerRating()"></Button>

// Beer Description
<Label class="beer_information_label" text="Beer Description"></Label>
<TextField hint="Enter Beer Description" autocorrect="false" text="" autocapitalizationType="allCharacters" row="2" col="1"></TextField>

// Beer Glassware
<Label class="beer_information_label" text="Beer type"></Label>
<TextField hint="Enter Beer Glassware" autocorrect="false" text="" autocapitalizationType="words" row="2" col="1"></TextField>

 <Button class="btn btn-primary btn-active" text="Submit this new beer" (tap)="submitNewBeertoFirebase()"></Button>

</StackLayout>

Solution

  • There's ways to make that work on a native iOS app, but I don't think the NativeScript ActionBar supports it yet. You can probably pull it off by accessing the native iOS code directly, but that's far from ideal.

    Please subscribe to this issue: https://github.com/NativeScript/NativeScript/issues/1130