TabView is not rendering at bottom of the page.

[techguysyoo]

Team,
We are working on a native app using Typescript and Nativescript. In that we are trying to render tabview control on the bottom of the page. Although we have tried couple of things but unable to achieve the goal.
Please find the attached UI and needed code.

Please, provide the details below:

Did you verify this is a real problem by searching [Stack Overflow]

Yes, we didn't got the solution.

Tell us about the problem

We are working on a native app using Typescript and Nativescript. In that we are trying to render tabview control on the bottom of the page. Although we have tried couple of things in android but unable to achieve the goal.
Please find the attached UI and needed code.

Which platform(s) does your issue occur on?

Both

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

• CLI: 2.3.0
• Cross-platform modules: 2.3.0
• Plugin(s): (look for the version number in the package.json file of your
  project)

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

Please add the attached xml file in your project to reproduce the issue.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

No, only xml view.

please find my .xml content below

[techguysyoo]

TabViewXML.txt

[NickIliev]

Hey @techguysyoo

The tab-view can not be rendered at the bottom for Android.
Instead, you can use segmented-bar to create your own customized bottom tabs. You can position your segmented bars at the bottom of the page and with its selectedIndex to load a different content in the upper part of your application.

Here you can find a very basic example of how to use segmented-bar.

[techguysyoo]

Many thanks for your quick reply @NickIliev ,

Is there any way without segmented bar we can achieve the functionality since with segmented bare we have done but not getting the look and feel like tabview?
Appreciate your input.

[NickIliev]

@techguysyoo

The reason tab-view is render at the top for Android and at the bottom for iOS is because we want to keep the native behavior (so you would get exactly the same behavior as in the native iOS and Android). So you can't' customize some aspects of the modules. However, you have many ways to provide UX for your custom elements with animations (both CSS and https://docs.nativescript.org/ui/animation) and styles.

In case you have chosen the path of creating your app with Angular-2 then you can also refer to the native Angular-2 structural directives. For example, this sample is very similar to creating a basic structure for custom tab view but with nativeScript and Angular-2

[techguysyoo]

Thanks Team!

[dndeus]

I'm not sure if i should post my issue here or open another issue since what I'm trying to do is similar to this thread.

I'm trying to render segmented bar at the bottom too but using the angular 2 implementation. I copied and pasted the example from the docs but when i place

<SegmentedBar #sb [items]="Items" (selectedIndexChange)="onChange(sb.selectedIndex)">
</SegmentedBar>

<StackLayout visibility="{{ visibility1 ? 'visible' : 'collapsed' }}">
    <Label [text]="'The new selectedIndex is: ' + selectedIndex" margin="20"></Label>
</StackLayout>

<StackLayout visibility="{{ visibility2 ? 'visible' : 'collapsed' }}">
    <Label [text]="'The new selectedIndex is: ' + selectedIndex" margin="20"></Label>
</StackLayout>

<StackLayout visibility="{{ visibility3 ? 'visible' : 'collapsed' }}">
    <Label [text]="'The new selectedIndex is: ' + selectedIndex" margin="20"></Label>
</StackLayout>

the screen doesn't show the segmented bar at all but instead it shows white screen. If i remove the stacklayouts I see the segmented bar items.

I copied the .ts example and the .html

[Gerstalexej]

@NickIliev
I too am dealing with this problem. Are there already css+xml (+js) examples online somewhere that replicate the behaviour of a tabview in a segmented bar? Also, I am very interested in the last example you mention but the link seems to be broken.

[NickIliev]

@Gerstalexej we've made some changes to the structure of the sample project - I have now fixed the links - for your convenience here is a direct link to the root directory of the sample application for NativeScript + Angular-2

@dianikol Keep in mind that you should have your components wrapped in a single root one. You can also take a look at this example of how to handle segmented bar in Angular-2 application - - you can also refer to the example given with *ngSwitch where we have not used segmented bar but the idea is applicable with the same logic.

Example for creating custom tabs with content field (using FlexboxLayout and GridLayout but the same can be achived with other UI elements as well)

page.component.html

<GridLayout rows="100, *" columns="*" exampleTitle toggleNavButton>
    <FlexboxLayout row="0" flexDirection="row">
        <Button flexShrink="0" class="btn btn-primary btn-active" margin="15" width="80" text="Blue" (tap)="onBlue()"></Button>
        <Button flexShrink="0" class="btn btn-primary btn-active" margin="15" width="80" text="Purple" (tap)="onPurple()"></Button>
        <Button flexShrink="0" class="btn btn-primary btn-active" margin="15" width="80" text="Yellow" (tap)="onYellow()"></Button>
    </FlexboxLayout>
    <GridLayout row="1" [ngSwitch]="color" class="p-15 m-t-15" height="280" borderRadius="2">
        <GridLayout *ngSwitchCase="'purple'" backgroundColor="#8C489F" ></GridLayout>
        <GridLayout *ngSwitchCase="'blue'" backgroundColor="#0077AF" ></GridLayout>
        <GridLayout *ngSwitchCase="'yellow'" backgroundColor="#FFFF66" ></GridLayout>
        <GridLayout *ngSwitchDefault backgroundColor="gray" ></GridLayout>
    </GridLayout>
</GridLayout>

page.component.ts

import { Component } from "@angular/core";

@Component({
    selector: 'ngswitch-directive',
    templateUrl: "ui-category/ng-directives/ngswitch-directive/ngswitch-directive.component.html",
})

export class NgSwitchComponent {
    public color: string;

    onBlue() {
        this.color = "blue";
    }

    onPurple() {
        this.color = "purple";
    }

    onYellow() {
        this.color = "yellow";
    }
}

In the code above we are simply changin the color of the content but following the same logic you can pass different context or hide/show different layouts.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.