How to make fullscreen Ionic Capacitor App?

Question

Capacitor have in docs tutorial about screen orientation (https://capacitorjs.com/docs/v2/guides/screen-orientation#screen-orientation-in-your-capacitor-app), but how to toggle app to fullscreen? Cordova had built-in settings in config.xml, but in capacitor I dont know how to make it

Incomputable

Answer 1

Use the fullscreen plugin from Cordova (still working with Capacitor)

npm install cordova-plugin-fullscreen
npm install @awesome-cordova-plugins/android-full-screen
ionic cap sync

Then in your App.tsx

AndroidFullScreen.isImmersiveModeSupported()
  .then(() => AndroidFullScreen.immersiveMode())
  .catch(console.warn);

Try it on your phone

ionic cap run android --external -livereload

This will hide both the status bar and the navigation buttons. If user swipe down where the status bar was, it will smoothly show it for 2 seconds.

Omnibus

I get error saying "SyntaxError: Cannot use import statement outside a module" .../node_modules/(awesome-cordova-plugins/android-full-screen/index.js(16) – Work

Great answer, thanks. For Vue & Ionic I placed it in src/main.js after createApp() – Liftoff

Answer 2

I assume you want to hide the status bar. In that case you can use the official Capacitor Status Bar plugin to hide the status bar. See https://capacitorjs.com/docs/apis/status-bar#hide.

import { StatusBar } from '@capacitor/status-bar';

const hideStatusBar = async () => {
  await StatusBar.hide();
};

Haunted

in addition to hiding the status bar, if you want to also remove the navigation bar from the bottom, there is a setting to use gestures instead. see also answertabs.com/… - this has nothing to do with capacitor. – Lippold

for me I want it different. is there a setting I can force the screen to respect the notification bar's position? – Resultant