ionic react screen orientation

page opens in portrait orientation

press landscape to fix screen in landscape orientation

press auto to unlock screen

rotate phone, screen rotates too

press portrait to fix screen in portrait orientation

//cmd

npm install @ionic-native/core
npm install @ionic-native/screen-orientation
npm install cordova-plugin-screen-orientation

---------------------------------------------
//tab3.tsx

import React, { useState, useEffect } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonFab, IonFabButton,
  IonFabList, IonItemGroup, IonItemSliding,
  IonItemOptions, IonItemOption, IonNote, IonMenu,
  IonRouterOutlet, IonListHeader, IonMenuToggle,
  IonButtons, IonMenuButton, IonInput, IonSplitPane,
  IonPopover, IonSpinner, IonRadioGroup, IonRadio,
  IonRange, IonSearchbar, IonFooter, IonSegmentButton,
  IonSegment, IonToast, IonToggle, IonTextarea
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';
import {
  call, home, heart, pin, star,
  globe, basket, camera, bookmark
} from 'ionicons/icons';
import { ScreenOrientation } from '@ionic-native/screen-orientation'

const Tab3: React.FC = () => {
  const [oritation, setOritation] = useState<string>('')

  useEffect(() => {
    setOritation(ScreenOrientation.type)
  }, []);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>screenOrientation Example</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem>
            <IonButton onClick={() => {
              ScreenOrientation.lock(ScreenOrientation.ORIENTATIONS.PORTRAIT);
              setOritation(ScreenOrientation.ORIENTATIONS.PORTRAIT)
            }}
            >Portrait</IonButton>
            <IonButton onClick={() => {
              ScreenOrientation.lock(ScreenOrientation.ORIENTATIONS.LANDSCAPE);
              setOritation(ScreenOrientation.ORIENTATIONS.LANDSCAPE)
            }}
            >Landscape</IonButton>
            <IonButton onClick={() => {
              ScreenOrientation.unlock();
              setOritation('auto')
            }}
            >Auto</IonButton>
          </IonItem>
          <IonItem>
            <IonLabel>Orientation:</IonLabel>
            {oritation}
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>

  );
};

export default Tab3;

reference:
https://stackoverflow.com/questions/57787916/what-is-the-right-way-to-use-ionic-native-cordova-plugins-with-ionic-react
https://ionicframework.com/docs/native/screen-orientation