id: plugin-screen-orientation
title: Screen Orientation
tags:
- cordova
- capacitor
- ionic
- javascript
- typescript
- plugin
- mobile
- screen orientation
Screen Orientation
Cordova plugin to set/lock the screen orientation in a common way for iOS, Android, and windows-uwp.
Online documentation
Cordova documentation
Installation
Cordova
cordova plugin add cordova-plugin-screen-orientation
npm install @awesome-cordova-library/screen-orientation
Capacitor / Ionic
npm install cordova-plugin-screen-orientation
npm install @awesome-cordova-library/screen-orientation
npx cap sync
Vanilla
Declaration
type OrientationLockCordovaType =
| "any"
| "landscape"
| "landscape-primary"
| "landscape-secondary"
| "portrait"
| "portrait-primary"
| "portrait-secondary";
class ScreenOrientation {
static lock(orientation: OrientationLockCordovaType): void;
static unLock(): void;
static currentOrientation(): OrientationLockCordovaType;
static onOrientationChange(
callback: (orientation: OrientationLockCordovaType) => void
): void;
}
Usages
import ScreenOrientation from "@awesome-cordova-library/screen-orientation";
// lock the device orientation
ScreenOrientation.lock("portrait");
// unlock the orientation
ScreenOrientation.unLock();
// access current orientation
ScreenOrientation.currentOrientation();
ScreenOrientation.onOrientationChange((o) => console.log(o));
React
Declaration
const useScreenOrientation: () => {
lock: (orientation: OrientationLockCordovaType) => void;
unLock: () => void;
currentOrientation: () => OrientationLockCordovaType;
onOrientationChange: (
callback: (orientation: OrientationLockCordovaType) => void
) => void;
};
Usages
import { useEffect } from "react";
import useScreenOrientation from "@awesome-cordova-library/screen-orientation/lib/react";
function App() {
const { lock, unLock, currentOrientation, onOrientationChange } =
useScreenOrientation();
useEffect(() => {
lock("portrait");
}, []);
return <div />;
}
