JavaScript function that detects phone orientation change

Question

Long story short I'm writing a calculator app in react-native and i want to have 2 different views for when the phone is vertiacly and horizontaly, is there a quick way to get the phone orientation without installing any packages

Please see => [Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions](https://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-ad) and [Detect rotation of Android phone in the browser with JavaScript](https://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript) — daddygames, Oct 28 '21 at 18:09
Is there a reason why you want to use JavaScript for that? Using css media queries should be sufficient for that purpose. — t.niese, Oct 28 '21 at 18:18
@t.niese I'm new to this so JS and react so I though that JS would be enough to do this — m3k_1, Oct 28 '21 at 18:29

score 2 · Answer 1 · answered Oct 28 '21 at 18:21

import { Dimensions } from 'react-native';

function useIsHorizonal() {
  const [isHorizonal, setIsHorizonal] = useState( Dimensions.screen.width > Dimensions.screen.height )
  useEffect(()=> {
     Dimensions.addEventListener(
         'change',
         ({ screen: { width, height }}) =>
              setIsHorizonal(width > height)
     )
   }, [])
   return isHorizonal
}

JavaScript function that detects phone orientation change

1 Answers1