ActionBar isn't showing on NativeScript Angular 2 modal - nativescript

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>

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

If you want to close modal try this -
close(args){
this.page.closeModal();
}
You have to close modal being opened in the function call.If you need further help ask.

Related

ios - Cannot click first item in radlistview

I cannot click the first item in a RadListView. However it works well in android.
In this code, onitemSelected is not called on the first item
<RadListView
class="jobs"
row="1"
loadOnDemandMode="Auto"
pullToRefresh="true"
selectionBehavior="Press"
[items]="jobPaginator.docs"
(itemSelected)="onItemSelected($event)"
(loadMoreDataRequested)="onLoadMoreItemsRequested($event)"
(pullToRefreshInitiated)="onPullToRefreshInitiated($event)">
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="vertical" class="jobs__card">
<Label class="jobs__card-customer-name" [text]="item.customerName"></Label>
<Label class="jobs__card-device-model" [text]="item.deviceModel"></Label>
<Label class="jobs__card-store-name" [text]="item.storeName"></Label>
<Label class="jobs__card-customer-email" [text]="item.email"></Label>
<Label class="jobs__card-customer-phone" [text]="item.phone"></Label>
</StackLayout>
</ng-template>
</RadListView>

Nativescript Tabview is not rendered at all but there is no exception/error either

In my HTML file I have this markup: While the ActionBar shows the title , the tabviews in the stacklayout are not visible at all and I get no errors, but I do not understand why??? I am new to nativescript... ;-)
Anyone can see what I do wrong?
<ActionBar title="Working days planner" class="action-bar">
</ActionBar>
<StackLayout class="page">
<TabView id="tabViewContainer">
<TabViewItem title="First Tab">
<StackLayout>
<Label text="Working days" class="action-label m-15"></Label>
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
</ng-template>
</ListView>
</StackLayout>
</TabViewItem>
<TabViewItem title="Second Tab">
<StackLayout>
<Label text="Second Tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
</StackLayout>
</TabViewItem>
</TabView>
</StackLayout>
The StackLayout code in the first TabViewItem does work when its put under the ActionBar, but the TabView component somehow screws everything.
I haven't seen that syntax with the TabViewItem element. Try starting from a simpler example from the documentation page:
NativeScript TabView for Angular
Once you get a basic example working take incremental steps to change the content over to yours. Also, this is a basic feature so you can set up a Playground example and share that if you have specific problems.
Try removing the StackLayout above, you really don't need it.

nativescript bottom nav that stays in place after loading new view

I'm developing some app made on nativescript. Recently, i see that my app is more like website not an app, beacuse of how navigation works.
I'm having bottom nav (atached - this grey with 5 icons) that is used to load proper views.
But when i click on home or any other icon, new view is loaded, but also nav is 'reloaded'. So it will not stay in place but load with new view. My question is - is possible oto have static botom bar ? I've tried 2 plugins found on marketplace, but without success. Thanks for and help.
<Page class="page" loaded="loaded" xmlns:header="components/header" xmlns:footer="components/footer">
<GridLayout rows="120,*,60">
<StackLayout row="0">
<!-- Common header -->
<header:header/>
</StackLayout>
<ScrollView row="1" verticalAlignment="top" class="scrollview" tap="{{ loadPage }}">
<StackLayout class="redeem">
<Label text="Enter your code below to redeem your reward" class="info" textWrap="true"></Label>
<Label text="Code" class="info code" textWrap="true"></Label>
<TextField />
<Button text="Redeem" class="button blue"></Button>
</StackLayout>
</ScrollView>
<StackLayout row="2">
<!-- Common footer -->
<footer:footer/>
</StackLayout>
</GridLayout>
</Page>
:
<AbsoluteLayout class="footer" loaded="menu" horizontalAlignment="center" xmlns:sd="nativescript-ui-sidedrawer">
<GridLayout rows="auto" columns="*,*,*,*,*" horizontalAlignment="center">
<Label row="0" col="0" class="fa" text="" tap="{{ mainPage }}"></Label>
<Label row="0" col="1" class="fa" text="" tap="{{ creditPage }}"></Label>
<Label row="0" col="2" class="fa" text="" tap="{{ seatPage }}"></Label>
<Label row="0" col="3" class="fa" text="" tap="{{ refs }}"></Label>
<Label id="openMenu" row="0" col="4" class="fa" text="" tap="toggleDrawer"></Label>
<!--<Label id="openMenu" row="0" col="4" class="fa" text="" tap="{{ loadPage }}"></Label>-->
</GridLayout>
</AbsoluteLayout>
You could use DockLayout and dock the content to the bottom (Angular example here)
Also in the upcoming release 4.0.0 of NativeScript (expected April-2018) will provide support for different root views (apart from Page) meaning you could create bottom static layout like GridLayout or even better a bottom TabView (also coming for Android in 4.0.0) and create Frame in the upper layout for your dynamic content. (Look here)

How can I get the tap sound when a user touch a gridlayout?

How can I get the tap sound when a user touch a gridlayout?
<GridLayout row="3" colSpan="2" columns="15*,75*,10*" height="12%" rows="*,*" class="card-large box" (tap)="onTap()">
<Label text="" class="fa centered icon-category" col="0" rowspan="2"></Label>
<Label text="MyText" class="category-name" verticalAlignment="bottom" col="1" row="0"></Label>
<Label text="numbers" verticalAlignment="top" col="1" row="1"></Label>
<Label text="" class="fa centered icon-arrow" col="2" rowspan="2"></Label>
</GridLayout>
UPDATE: I could get the sound by accesing the android native api, here is the code:
let decorView:any = app.android.startActivity.getWindow().getDecorView()
decorView.playSoundEffect(android.view.SoundEffectConstants.CLICK)
but I would like to know why tapping an android layout does not fire the sound effect,..
The above code should work as expected. Here is a demonstration application where the sound effect is triggered when the user taps on the layout (the layout with the tap event where the magic is happening)

why Listview is not scroll-able inside scrollview in nativescrit angular2

# I am using listview inside the Scrollview but listview is not scrollable inside the scrollview as top parent view
component.html
<ScrollView>
<StackLayout class="zindex">
<!--<AutoComplete [items]="ArrayVillage" (itemTap)="itemTapped($event)"> </AutoComplete>-->
<SearchBar row="0" #sb hint="Search for a country and press enter" (clear)="onClear()" [text]="searchPhrase" (submit)="onSubmit(sb.text)"></SearchBar>
<ListView row="1" [items]="myItems" class="list-group">
<template let-item="item">
<GridLayout class="item" class="list-group-item">
<Label [text]="item.name" class="list-group-item-heading"></Label>
</GridLayout>
</template>
</ListView>
</StackLayout>
<ScrollView>
Try Using Repeater instead of ListView as mentioned in https://docs.nativescript.org/cookbook/ui/repeater. Following is an example of how you can include Repeater inside a ScrollView and can obtain whole layout as scrollable.
<ScrollView>
<StackLayout class="margin">
<Label text="{{ description }}"></Label>
<Repeater items="{{ options }}" row="1">
<Repeater.itemTemplate>
<StackLayout>
<Label text="{{ description }}"></Label>
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
</ScrollView>
Trying it by wrapping the scrollview into a AbsoluteLayout
<AbsoluteLayout>
<ScrollView>
<StackLayout class="zindex">
//Rest of stuff
</StackLayout>
<ScrollView>
</AbsoluteLayout>
Having a scrollview inside other one is not a good practice. It doesn't work beacuse scrollview tries to calculate the infinite view and do it with a scrollable inside could work just in some cases having control of the parent view, but don't go that painfull way.
In your code I have a question, why would you want to scroll the SearchBar? Try this structure I think is what you want.
<StackLayout>
<SearchBar></SearchBar>
<ListView>
<template>
<GridLayout >
<Label ></Label>
</GridLayout>
</template>
</ListView>
The SearchBar is fixed and the List scrolllable
Look at the video, play with the emulator and you will see that at the beggining it seems to work but is the "computer mouse scroll" when you use click trying to scroll it doesn't work anymore and is because the screen doesn't know which scrollable element has to scroll.
To do 2 scrollable parts can be a solution, as shown in the end of the video (I implemented in Nativescript with Javascript because I'm working in a project but is almost the same)
<StackLayout>
<Label fontSize="20" color="blue" text="You can do two scrollable parts" textWrap="true" />
<Button text="to" />
<ListView items="{{ items }}" height="300" loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
<ListView.itemTemplate>
<Label text="{{ name }}" textWrap="true" />
</ListView.itemTemplate>
</ListView>
<ScrollView>
<StackLayout>
<Button text="1" />
<Button text="2" />
<Button text="3" />
<Button text="4" />
<Button text="5" />
<Button text="6" />
<Button text="3" />
<Button text="4" />
<Button text="5" />
<Button text="6" />
</StackLayout>
</ScrollView>
</StackLayout>

Resources