Overlay button on NativeScript TabView?

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.

so basically you want a extra tabbutton in tabbar. but don't want to activate that tab only click? am i right? — bhavin jalodara
Right. I am looking into the native apis and think capturing UITabBarController shouldSelect could be a way to do this. Think of Instagram where the center button in the tab bar (+) just opens a modal. — lilbiscuit
try to change tab index to other index without animating when specified tab is selected and do the work you want to do on the tab click. i will give similliar effect you required. — bhavin jalodara
@bhavinjalodara I don't see how this is possible, particularly with the Angular version of TabView. You can't specify individual index and I don't see any docs on animating tab changes.Am I missing something? — lilbiscuit

Nathanael Nathanael · Accepted Answer · 2018-05-30T16:56:21

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); )

Overlay button on NativeScript TabView?

1 Answers