1

Please how can i hide Bottom Navigation in a particular page in nativescript core? The code for my BottomNavigation is in App-root.xml file. this makes it visible on all pages, i'm trying to hide it from a specific page. Below is my app-root.xml file

<BottomNavigation id="bottomNav">
    <TabStrip backgroundColor="#3f3f3f">
        <TabStripItem class="navigation__item">
            <!--
                Note TabStripItem will only accept single Label and/or single Image elements that it
                will "adopt"; any other layout elements you try to specify will be ignored
            -->
            <Label text="Play" />
            <Image src="font://&#xF04B;" class="fas t-36" />
        </TabStripItem>
        <TabStripItem class="navigation__item">
            <Label text="Trending" />
            <Image src="font://&#xF75A;" class="fas t-36" />
        </TabStripItem>
        <TabStripItem class="navigation__item">
            <Label text="Account" />
            <Image src="font://&#xF2BD;" class="fas t-36" />
        </TabStripItem>
    </TabStrip>

    <TabContentItem>
        <Frame defaultPage="home/home-items-page" />
    </TabContentItem>

    <TabContentItem>
        <Frame defaultPage="browse/browse-page" />
    </TabContentItem>

    <TabContentItem>
        <Frame defaultPage="search/search-page" />
    </TabContentItem>
</BottomNavigation>
kunlee
  • 591
  • 1
  • 4
  • 15

3 Answers3

1

You may toggle visibility of TabBar natively

To hide,

if (bottomNav.android) {
    bottomNav._bottomNavigationBar.setVisibility(android.view.View.GONE);
} else {
    bottomNav.viewController.tabBar.hidden = true;
}

To show it back,

if (bottomNav.android) {
    bottomNav._bottomNavigationBar.setVisibility(android.view.View.VISIBLE);
} else {
    bottomNav.viewController.tabBar.hidden = false;
}

Where bottomNav should be instance of your BottomNavigation component.

Manoj
  • 21,753
  • 3
  • 20
  • 41
  • thanks, but it says bottomNav is undefined, what can i do about this – kunlee Feb 08 '20 at 06:41
  • As I mentioned `bottomNav` presumed to be the reference to your bottom navigation control. Assign a id, get it by id from controller and use it. If you are still having issues, please share the JS part of your code, how & when you are accessing the control. – Manoj Feb 08 '20 at 17:12
  • `let bottomBar = page.getViewById("bottomNav"); if (bottomBar.android) { bottomBar._bottomNavigationBar.setVisibility(android.view.View.GONE); } else { bottomBar.viewController.tabBar.hidden = true; }` The bottomNav is in my App-root.xml – kunlee Feb 12 '20 at 19:04
  • Please share a Playground sample where I could see the issue. It works on my end, tested with Android Pixels. – Manoj Feb 12 '20 at 19:22
  • thanks, i was able to fix it with `let bottomBar = application.getRootView(); if (bottomBar.android) { bottomBar._bottomNavigationBar.setVisibility(android.view.View.GONE); } else { bottomBar.viewController.tabBar.hidden = true; }` – kunlee Feb 12 '20 at 20:21
1
let bottomBar = application.getRootView();

    if (bottomBar.android) {
        bottomBar._bottomNavigationBar.setVisibility(android.view.View.GONE);
    } else {
        bottomBar.viewController.tabBar.hidden = true;
    }
kunlee
  • 591
  • 1
  • 4
  • 15
1

For anyone who is searching for a simple solution : Try this:

<TabStrip visibility="collapsed">

It worked for me.

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
أيمن - ⴰⵢⵎⵏ - ⵣ
  • 26
  • 4