title: How to rotate a View properly in React Native?
body: <pre><code>My code 
     &lt;View style={{borderColor:&quot;red&quot;,borderWidth:4,flex:1,transform: [{ rotate:'90deg' }]}}&gt;
  &lt;Text&gt;Hi&lt;/Text&gt;
        &lt;/View&gt;
  </code></pre>
  <p>result:
  <a href="https://i.stack.imgur.com/C9ryl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C9ryl.jpg" alt="enter image description here" /></a></p>
  <p>This is not working as I expected. View rotates but width and height is calulated based on phones portait mode and the view is in landscape mode which breaks design.
  I tried a work-around as follows</p>
  <pre><code>import { useWindowDimensions } from 'react-native';
      import React, { useState, useEffect,useCallback, useRef  } from 'react';
      import { Text,View} from &quot;react-native&quot;;
      const FullScreenMediaPlayer = (props) =&gt; {
        const windowWidth = useWindowDimensions().width;
        const windowHeight = useWindowDimensions().height;
          return (
            &lt;View style={{width:windowHeight,height:windowWidth,borderColor:&quot;red&quot;,borderWidth:4,flex:1,transform: [{ rotate:'90deg' }]}}&gt;
      &lt;Text&gt;Hui&lt;/Text&gt;
            &lt;/View&gt;
          );
      }
      
      export default FullScreenMediaPlayer;
  </code></pre>
  <p>Result:
  <a href="https://i.stack.imgur.com/PxkW7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PxkW7.jpg" alt="enter image description here" /></a>
  Views width is still not screens width ?
  How can I rotate View and have its height and width same as screen's height and width in landscape mode?</p>
  <p>PS: I dont want to use orientation package I just want to achieve this purely based on styles</p>