CODEWITHSUNDEEP
fullscreencapacitor
Vladimir
Vladimir

Reputation: 61

How to make fullscreen Ionic Capacitor App?

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

Upvotes: 5

Views: 9776

Answers (2)

Maxime Lechevallier
Maxime Lechevallier

Reputation: 1196

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.

Upvotes: 6

RGe
RGe

Reputation: 1869

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();
};

Upvotes: 0

Related Questions