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
2 Answers
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();
};
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.
Related