Overlay button on NativeScript TabView? - ios

Question

I have a simple TabView like this using NativeScript w/angular:
<TabView [(ngModel)]="tabSelectedIndex" height="300px" (selectedIndexChanged)="onSelectedIndexChanged($event)">
<StackLayout *tabItem="{title: 'Tab 1'}">
<Label text="Content in Tab 1"></Label>
</StackLayout>
<StackLayout *tabItem="{title: 'Button 1'}">
<!-- these won't be content here because clicking this should not change to a another tab, but instead should do something else. -->
</StackLayout>
<StackLayout *tabItem="{title: 'Tab 2'}">
<Label text="Content in Tab 2"></Label>
</StackLayout>
</TabView>
I want a button in the tab bar that doesn't change the view, but instead does something else (such as open a modal dialog).
I tried a new <StackLayout> both inside and outside of <TabView>.
I also tried using an <AbsoluteLayout>. All methods caused the app to crash.
Is it possible to capture the tab view change using selectedIndexChanged and prevent the change?
I tried stopPropagation() on the event but got error:
Property 'stopPropagation' does not exist on type 'SelectedIndexChangedEventData'.
I tried changing the view back to the view that existed when the middle button was clicked, but there is a noticeable flicker because the view has to change before this event is even fired. What would have been acceptable is something like onSelectedIndexWill Change but that method does not exist.
onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
if (args.newIndex === 1) { //the middle button
setTimeout(() => {
tabView.selectedIndex = args.oldIndex; //go back to the previous view (causes flicker)
//do stuff for the button click.
});
}
}
Or is there another way to incorporate a button in the tab bar that doesn't link to a new view?
Or should I not implement a native tab bar and instead just create a navigation bar from scratch?
Here's how it can be done for ios.
Here is a sample app in NativeScript playground showing the issue. Click center link to see the flicker.

Answer 1

Do to the fact that the NativeScript team has refused to export the delegates this is not something you can monkey patch in at this point. The only way to do this is to fork the TabView code and create your own plugin using it.
However, making this change should be fairly simple once you have your forked copy. You just need to on around line 64 public tabBarControllerShouldSelectViewController(tabBarController: UITabBarController, viewController: UIViewController): boolean {
You just need to detect which viewController it is trying to load; and then return false in the case where you don't want to actually change the view. ;-)
Two possible ways;
check the owner.selectedIndex; I believe it should be pointing to the proper new index at this point;
however if it is not then the second possible method would be to check the viewController against the owners viewcontroller list (i.e. const selectedIndex = owner._ios.viewControllers.indexOfObject(viewController); )