CODEWITHSUNDEEP
androidangularionic-frameworkionic4android-navigation-bar
Gaurav
Gaurav

Reputation: 1

Ionic 4 - hide android navigation bar (bottom)

When ion-input has focus it shows the navigation bar. When the focus is changed navigation bar hides. here is the code.

Used in app.component.ts

this.androidFullScreen.isImmersiveModeSupported().then(() => this.androidFullScreen.immersiveMode());

On the signUp page, I have 2 input fields. When the 1st field is clicked the ion input has focus and the navigation bar at the bottom is shown.

Already tried (ionFocus)= "hideNavigationBar()"

hideNavigationBar() {
   this.androidFullScreen.setSystemUiVisibility(AndroidSystemUiFlags.LayoutStable | 
   AndroidSystemUiFlags.LayoutHideNavigation | AndroidSystemUiFlags.HideNavigation);
}

Also, tried to hide the navigation bar when the soft keyboard is shown.

this.keyboard.onKeyboardWillShow().subscribe(()=> { 
this.keyboard.hide();
this.androidFullScreen.setSystemUiVisibility(
          AndroidSystemUiFlags.HideNavigation |
          AndroidSystemUiFlags.LayoutHideNavigation |
          AndroidSystemUiFlags.Immersive |
          AndroidSystemUiFlags.LayoutStable);
});

But still, the navigation bar is shown. Can someone help?

Upvotes: 0

Views: 2909

Answers (1)

Shabbir Dhangot
Shabbir Dhangot

Reputation: 9131

That you can achieve using cordova plugin.

Install

ionic cordova plugin add cordova-plugin-navigationbar
npm install @ionic-native/navigation-bar

Code Side

import { NavigationBar } from '@ionic-native/navigation-bar/ngx';

constructor(private navigationBar: NavigationBar) { }

...

let autoHide: boolean = true;
this.navigationBar.setUp(autoHide);

Detailed Description is here. https://ionicframework.com/docs/native/navigation-bar

Upvotes: 1

Related Questions