Tab bar disappear when I push a page from tabs.ts

Ionic Framework ionic-v3
1

I created a fab button on tabs.html to navigate to another page but tabs bottom bar disappear
here is my code

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { EarningsPage } from '../earnings/earnings';
import { ArenaPage } from '../arena/arena';
import { LeadsPage } from '../leads/leads';
import { ProductsPage } from '../products/products';
import { VoicemailPage } from '../voicemail/voicemail';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = ArenaPage;
  tab2Root = LeadsPage;
  tab3Root = ProductsPage;
  tab4Root = EarningsPage;

  constructor(public navCtrl: NavController) {

  }

  goToVoicemails(){
    this.navCtrl.push(VoicemailPage, {}, {animate: false});
  }

}
2

Please show your html file.

4 
<!--
  Generated template for the VoicemailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <ion-title>voicemail</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-content>
      <ion-card-title>
        <ion-avatar item-start class="avatar">
          <img src="assets/imgs/circle-grey.png"/>
        </ion-avatar>
        <div class="card-text-info">
          <span class="customer-name">
            CUSTOMER NAME
          </span>
          <span class="voicemail-date">
            DATE
          </span>
          <p class="group_name">
            PRODUCT NAME
            <span end class="voicemail-time">
              5 SECS
            </span>
          </p>
        </div>
      </ion-card-title>
      
      <audio id="5ebb08524c29262dab405192" controls controlsList="nodownload"><source src="https://api.twilio.com/2010-04-01/Accounts/AC58ca4114dc0f4af3a650d5fb8faa780d/Recordings/REb2fb6bedabe748f7da22b3e04965bdde" type="audio/x-wav"></audio>
      <div class="auido-controls">
        <ion-icon id="testplay" name="play" (click)="playAudio($event, '5ebb08524c29262dab405192')"></ion-icon>
        <ion-icon name="pause" class="display-none" (click)="pauseAudio($event, '5ebb08524c29262dab405192')"></ion-icon>
        <ion-icon name="call"></ion-icon>
        <ion-icon name="paper"></ion-icon>
      </div>
    </ion-card-content>
    
  </ion-card>
  
</ion-content>
5

Sorry for not being clear. I meant tabs.html. I guess you are calling goToVoicemails from tabs.html. In that case, the page is added to the navigation stack in which TabsPage is pushed. If you want your tabs panel to appear in all of your pages, then you should navigate to those pages through one of the tabs page.The same way Youtube app works.
To my understanding, that’s the intended behavior. The tab is only available to the page it is defined in and its child pages. Each and every page in which you want to have that tab panel, has to be a child of your tabs page.
I don’t know the requirements of your project, but you could add a general tab calling it as ‘Home’ or something similar and use navigation to rest of your pages through that tab. If it fulfills your requirement.

6

thank you for answering

The problem is that I need a fab bottom on floating over the tab bar on the bottom, so thats why im calling goToVoicemails from there. Is no way yo push a view with the tab bar from there? I remember seeing something like {index: 1} on the tabs or something cant remember how it was to be able push pages with the tab bar

7

That’s not what FABs are for:

A FAB should perform a constructive action (such as create, share, or explore).

They shouldn’t be used for navigation.

8

thank you for your response

Yeah I mean, it can be a normal button it just looks like a fab button, that the style of the button

9

Then it is a FAB from the POV of the user, and that’s what matters. What I’m trying to suggest is that there may well be a way to design your problem away by rethinking the UI, that will have the added benefit of making your app more usable.

10 
 I need a fab bottom on floating over the tab bar on the bottom

Can’t you just declare an additional tab and use it without any label. Maybe add a border to it, and set border-radius to 50%. You can very well redesign your tab button to look like a fab. No need to use fab for navigation. See this tutorial.